September 17, 2012

Create clean and professional CSS3 buttons

Author: tec at 9/17/2012 05:36:00 pm Labels: , , , ,
CSS3 buttons


Today I will demonstrate how to create clean and professional looking CSS3 buttons but first of all lets discuss why it's so good?

CSS3 buttons look essentially the same as graphical buttons but take fewer time to load and render, are easy to make, easy to embed and can be easily modified by anyone with a text editor.
All major browsers now support CSS3 properties used here.

Lets begin.
Create a hyperlink and add class btn to it. Now we are going to apply different CSS properties to this class to make it look like a button. 
<a href="#mybutton" class="btn">My Button</a>
.btn{
 
}
My Button
Remove text underline effect 
.btn{
 text-decoration: none;
}
My Button
Add some text formatting 
.btn{
 text-decoration: none;
 font: bold 13px Arial;
}
My Button
Add text color 
.btn{
 text-decoration: none;
 font: bold 13px Arial;
 color: #333333;
}
My Button
Now watch closely. We are applying background gradient to our button. You can read more about gradients in CSS3 here. 
.btn{
 text-decoration: none;
 font: bold 13px Arial;
 color: #333333;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
}
My Button
Add some vertical and horizontal padding 
.btn{
 text-decoration: none;
 font: bold 13px Arial;
 color: #333333;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
 padding: 5px;
}
My Button
Add a border. 
.btn{
 text-decoration: none;
 font: bold 13px Arial;
 color: #333333;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
 padding: 5px;
 border: 1px solid #DCDCDC;
}
My Button
Adding box shadow for the effects 
.btn{
 text-decoration: none;
 font: bold 13px Arial;
 color: #333333;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
 padding: 5px;
 border: 1px solid #DCDCDC;
 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 box-shadow: 0 1px 0 0 #FFFFFF inset;
}
My Button
Add text shadow for more effects 
.btn{
 text-decoration: none;
 font: bold 13px Arial;
 color: #333333;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
 padding: 5px;
 border: 1px solid #DCDCDC;
 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 box-shadow: 0 1px 0 0 #FFFFFF inset;
 text-shadow:1px 1px 0px #ffffff;
}
My Button
Finally add hover effects. See we are again changing background gradient when cursor is brought over the button.
This is how the final button and final code looks like. 
You can experiment with more CSS properties to make your button look different. For example use "border-radius" to give your button rounded corners. 
.btn{
 text-decoration: none;
 font: bold 13px Arial;
 color: #333333;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
 padding: 5px;
 border: 1px solid #DCDCDC;
 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 box-shadow: 0 1px 0 0 #FFFFFF inset;
 text-shadow:1px 1px 0px #ffffff;
}

.btn:hover{
 cursor: pointer;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
 background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
 background-color:#dfdfdf;
}
My Button

1 comment:

  1. Unknown19 October 2012 at 13:21

    Thank you very much for this very wonderful instructions. I really appreciate it.
    learn about genf20 plus

    ReplyDelete

Subscribe to: Post Comments (Atom)