TechnoSlab: css3 gradient

Showing posts with label css3 gradient. Show all posts

September 17, 2012

Create clean and professional CSS3 buttons

1 comment: Author: tec at 9/17/2012 05:36:00 pm Labels: css3 button tutorial, css3 buttons tutorial, css3 gradient, css3 only buttons, professional css buttons

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