Friday 2 May 2014

CSS Designs - Buttons to wow your user's experience

Here are some very simple and good looking button designs that you can use to match with the layout of your website.

Flat Button

HTML-
<input type="button" id="flat" value="Flat Button" />

CSS-
#flat{
padding: 10px 60px;
border: none;
background-color: #00A0B1;
color: #fff;
}

Round Button

HTML-
<input type="button" id="round" value="Round Button" />

CSS-
#round{
padding:10px 60px;
border:none;
background-color: #643EBF;
color: #fff;
border-radius: 8px;
}

Ellipses Button

HTML-
<input type="button" id="ellipses" value="Ellipses Button" />

CSS-
#ellipses{
padding: 20px 60px;
border: none;
background-color: #2E8DEF;
color: #fff;
border-radius:50%;
}

Circle Button

HTML-
<input type="button" id="circle" value="Circle Button" />

CSS-
#circle{
width:100px;
height:100px;
border:none;
background-color: #A700AE;
color: #fff;
border-radius:50%;
}

Shadow Button

HTML-
<input type="button" id="shadow" value="Shadow Button" />

CSS-
#shadow{
padding: 10px 60px;
border:none;
background-color: #BF1E4B;
color: #fff;
box-shadow: 2px 2px 5px black;
}

Text Shadow Button

HTML-
<input type="button" id="textshadow" value="Text Shadow Button" />

CSS-
#textshadow{
padding: 10px 60px;
border:none;
background-color: #DC572E;
color: #fff;
text-shadow: 2px 2px 2px black;
}

Embedded Text Button

HTML-
<input type="button" id="embedded" value="Embedded Text Button" />

CSS-
#embedded{
padding: 10px 50px;
border: none;
background-color: rgba(0,0,0,0.3);
color: rgba(0,0,0,0.7);
font-weight: bold;
text-shadow: 0 1px 1px whitesmoke;
}

Combining All

HTML-
<input type="button" id="btn" value="Button" />

CSS-
#btn{
padding: 10px 60px;
border: none;
background-color: #0A5BC4;
color: #fff;
letter-spacing:1px;
text-shadow: 1px 1px 2px black;
box-shadow: 0 0 3px black;
}

No comments:

Post a Comment