Simple CSS3 Buttons
We all are familiar with the ability HTML5 and CSS3 has blessed the world, it make lives easier on the web. Not to mention reduce load time and request for images and background.
I love the ability to create simple looking buttons buttons without having to go through the whole photoshop process. Although you can create higher quality ones there, sometimes we just need a simple looking one without sacrificing too much quality. Not to mention the flexibility that comes with it.
Pro of CSS Buttons
- renders very quickly
- no http request for images
- flexible and easy to make changes
Cons of CSS Buttons
- limited styling you can apply
- cross browser issue, limited IE support
- somewhat bloated CSS
We all have trouble writing CSS3 especially for cross browser compatibility. Its sometimes hard to keep track, but there are useful tools out there that can help you with it.
I personally am tired of re-writing 3 lines for the same effect to work on all browsers, so I wrote a simple button that is based on CSS3 you can use. It is tested up to IE7, which it will degrade to standard gracefully.
There are workarounds for IE called CSS3 PIE, which adds CSS3 support for IE6-8. Give it a try and let me know what you think.
Now its just a matter of copy and paste, some minor adjustments and you’re good to go. Feel free to use it and edit it in your project.
HTML
<a href="#" class="btn btn-1">button</a>CSS
CSS is split into 2 classes, basic formatting on class btn and style on class btn-1, btn-2,or btn-3.
.btn{
display: block;
padding: 10px 20px;
text-decoration: none;
float: left;
font: bold 14px/21px helvetica, arial, sans-serif;
}/*Button 1 style*/
.btn-1{
color: #000;
border: 1px solid #ccc;
text-shadow: 0 1px 0 #888;
/*Rounded Corner*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* BACKGROUND - Fall back colour */
background: #555555;
/* GRADIENT */
background-image: -moz-linear-gradient(top, #555555, #333333); /* FF3.6 */
background-image: -ms-linear-gradient(top, #555555, #333333); /* IE10 */
background-image: -o-linear-gradient(top, #555555, #333333); /* Opera 11.10+ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#333333)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #555555, #333333); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(top, #555555, #333333);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#333333'); /* IE6–IE9 */
/*Box-Shadow*/
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.1);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.1);
}
.btn-1:hover{
color: #fff;
/* BACKGROUND - Fall back colour */
background: #666666;
/* GRADIENT */
background-image: -moz-linear-gradient(top, #666666, #444444); /* FF3.6 */
background-image: -ms-linear-gradient(top, #666666, #444444); /* IE10 */
background-image: -o-linear-gradient(top, #666666, #444444); /* Opera 11.10+ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #666666, #444444); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(top, #666666, #444444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#444444'); /* IE6–IE9 */
}
.btn-1:active{
color: #000;
/* BACKGROUND - Fall back colour */
background: #3a3a3a;
/* GRADIENT */
background-image: -moz-linear-gradient(top, #3a3a3a, #5a5a5a); /* FF3.6 */
background-image: -ms-linear-gradient(top, #3a3a3a, #5a5a5a); /* IE10 */
background-image: -o-linear-gradient(top, #3a3a3a, #5a5a5a); /* Opera 11.10+ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#3a3a3a), to(#5a5a5a)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3a3a3a, #5a5a5a); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(top, #3a3a3a, #5a5a5a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3a3a3a', EndColorStr='#5a5a5a'); /* IE6–IE9 */
/*Box-Shadow*/
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.3);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.3);
box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.3);
}
/*Button 2 style*/
.btn-2{
color: #16597a;
border: 1px solid #16597a;
border-color: rgba(0,0,0,.1)!important;
background: #39c;
/*Rounded Corner*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/*Box-Shadow*/
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
box-shadow: 0 0 5px rgba(0,0,0,.5);
}
.btn-2:hover{
color: #fff;
background: #38a9e1;
}
.btn-2:active{
color: #16597a;
background: #2e8bb9;
/*Box-Shadow*/
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 0 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 0 5px rgba(0,0,0,.3);
box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 0 5px rgba(0,0,0,.3);
}
/*Button 3 style*/
.btn-3{
color: #e09900;
border: 1px solid #5c2f00;
border-color: rgba(0,0,0,.1)!important;
background: #f5b800;
text-shadow: 0 1px 0 #ffdb8f;
/*Rounded Corner*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/*Box-Shadow*/
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3), inset 0 3px 5px rgba(255,255,255,.5);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.3), inset 0 3px 5px rgba(255,255,255,.5);
box-shadow: 0 0 5px rgba(0,0,0,.3), inset 0 3px 5px rgba(255,255,255,.5);
}
.btn-3:hover{
color: #5c2f00;
background: #ffc71f;
}
.btn-3:active{
color: #5c2f00;
background: #e6ac00;
/*Box-Shadow*/
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 3px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 3px 5px rgba(0,0,0,.3);
box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0 3px 5px rgba(0,0,0,.3);
}
If you have any feedback or suggestions, please let me know. Hope this helps reduce your dev time.
Note: I have come across the issue of IE9 don’t play well with both border radius and gradient. Be wary when you mix the two. If you know a fix, please do recommend it as well.
