[Cyan]

First Your Going to need a button to a link to style in this tutorial we will be using a Button an input button to be exact

You Need to set up your button like so

Code:

<input class="button" type="button" value="CSS Button" />

After that you will need to style the button using css, with that said you will be adding a class of button and the actual style like the coding below

Code:

.button { border:1px solid #CCCCCC; /*Sets the border */ border-radius:2px; /*Sets the Roundness of the border */ -webkit-box-shadow:0 0 3px #000; /* Adds an outer shadow to the button */ background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#e8e8e8', GradientType=0); /* IE6-9 */ }

Then to add a stylish button animation you will need to use the hover effect quite resourcefully

Code:

.button:hover{ border:1px solid #CCCCCC; border-radius:2px; -webkit-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out; -webkit-box-shadow: 0 0 3px #000; background: #e5e5e5; /* Old browsers */ background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #e5e5e5 0%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ }

Source & Credit: Burned Designs

[Fallen]

Thanks for sharing this and linking it to the source.

[Cyan]

Thanks for sharing this and linking it to the source.

Anytime!
The source is my internet bestfriend!

[Town]

very nice thread, you add a preview of the button

[Fallen]

very nice thread, you add a preview of the button

Yes, I agree. There should be some sort of way to tell what it comes out.

[Cyan]

Yes, I agree. There should be some sort of way to tell what it comes out.

Let me see if I can get a preview

[Fallen]

Thanks man. Just if you create it, you'll be able to get us one.

[Cyan]

Thanks man. Just if you create it, you'll be able to get us one.

I have no clue where to create one :O

[Aces]

Meh, I just generate a CSS button on http://www.cssbuttongenerator.com/ much faster.