• SumoMe

I am going to share to you a nice CSS Button that I’ve grown to like and use in many of my projects. Here’s a button with all the goods of a nice and glossy button without the load (and hassle) of images. Without further ado here it is:

Click here for more buttons

This one here is blue (obviously), and if hovered, changes to a color complementary to it, in which case, pink. The button uses 2 color codes from one color. 0to255.com is a great tool to find the lighter or darker shade of any one color, in case you want to change it. In fact this button is generated from www.cssbuttongenerator.com and I altered it myself to fit my preferences.

Here is the CSS:


.button-blue {
 position: relative;
 -moz-box-shadow:inset 0px 1px 0px 0px #a0b8f1, 0 1px 4px #555;
 -webkit-box-shadow:inset 0px 1px 0px 0px #a0b8f1, 0 1px 4px #555;
 box-shadow:inset 0px 1px 0px 0px #a0b8f1, 0 1px 4px #555;

 background: #4876e3; /*fallback for non-CSS3 browsers*/
 background: -webkit-gradient(linear, 0 0, 0 100%, from(#4876e3) to(#183f9c)); /*old webkit*/
 background: -webkit-linear-gradient(#4876e3, #183f9c); /*new webkit*/
 background: -moz-linear-gradient(#4876e3, #183f9c); /*gecko*/
 background: -ms-linear-gradient(#4876e3, #183f9c); /*IE10*/
 background: -o-linear-gradient(#4876e3, #183f9c); /*opera 11.10+*/
 background: linear-gradient(#4876e3, #183f9c); /*future CSS3 browsers*/
 -pie-background: linear-gradient(#4876e3, #183f9c); /*PIE*/

 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 -khtml-border-radius: 6px;
 border-radius:6px;
 border:1px solid #183f9c;
 display:inline-block;
 color:#fff !important;
 font-size:14px;
 font-weight:normal;
 padding: 10px 20px;
 text-decoration:none;
 text-shadow:0px -1px 0px #183f9c;
 text-align: center;
 line-height: 18px;
 cursor: pointer;
}.button-blue:hover {
 -moz-box-shadow:inset 0px 1px 0px 0px #f087cd, 0 1px 4px #555;
 -webkit-box-shadow:inset 0px 1px 0px 0px #f087cd, 0 1px 4px #555;
 box-shadow:inset 0px 1px 0px 0px #f087cd, 0 1px 4px #555;

 background: #d80090; /*fallback for non-CSS3 browsers*/
 background: -webkit-gradient(linear, 0 0, 0 100%, from(#d80090) to(#cc0066)); /*old webkit*/
 background: -webkit-linear-gradient(#d80090, #cc0066); /*new webkit*/
 background: -moz-linear-gradient(#d80090, #cc0066); /*gecko*/
 background: -ms-linear-gradient(#d80090, #cc0066); /*IE10*/
 background: -o-linear-gradient(#d80090, #cc0066); /*opera 11.10+*/
 background: linear-gradient(#d80090, #cc0066); /*future CSS3 browsers*/
 -pie-background: linear-gradient(#d80090, #cc0066); /*PIE*/

 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 -khtml-border-radius: 6px;
 border-radius:6px;
 border:1px solid #cc0066;
 text-shadow:0px 1px 0px #d80090;
}.button-blue:active {
 position:relative;
 top:1px;
}

Another tip: Since some styles here are not supported by older browsers (particularly that of Internet Explorer), I suggest that you use scripts like CSS3 PIE to make it compatible.

For more CSS button styles, just click the button above!