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;
}
