[CSS3] Free CSS3 button class

Tweet

Nowdays it's almost useless to use Photoshop to create web buttons...

Homepage

tips4design

Cool, ah? :D

cross-browser CSS3 button class
by www.tips4design.com

EDIT: I have created a new post with horizontal CSS3 menu classes, make sure to check that out too! Click here! 

Hi there guys :). Today I've made for you this sleek-looking CSS3 cross-browser button class. You can try it above (hover & click the buttons).

Here's the CSS:

<br /> .t4d_button {<br /> padding: 20px;<br /> margin: 10px;<br /> width:300px; <br /> background-color:#8DCD47; <br /> text-align:center; <br /> border-radius:8px;<br /> -o-border-radius:8px;<br /> -moz-border-radius:8px; <br /> -webkit-border-radius:8px; <br /> box-shadow: 0px 0px 5px black, inset 0px 0px 3px #10440F;<br /> -o-box-shadow: 0px 0px 5px black, inset 0px 0px 3px #10440F;<br /> -moz-box-shadow: 0px 0px 5px black, inset 0px 0px 3px #10440F;<br /> -webkit-box-shadow: 0px 0px 5px black, inset 0px 0px 3px #10440F; <br /> border:1px #AEF99B solid; <br /> cursor:pointer;<br /> }<br /> .t4d_button:hover{<br /> background-color:#9EDE58;<br /> }<br /> .t4d_button:active{ <br /> box-shadow: 0px 0px 2px black, inset 0px 0px 6px #10440F;<br /> -o-box-shadow: 0px 0px 2px black, inset 0px 0px 6px #10440F;<br /> -moz-box-shadow: 0px 0px 2px black, inset 0px 0px 6px #10440F;<br /> -webkit-box-shadow: 0px 0px 2px black, inset 0px 0px 6px #10440F;<br /> }<br /> .t4d_button:active a{<br /> font-size: 30px;<br /> }<br /> .t4d_button a{<br /> color:#10440F;<br /> display:block;<br /> text-decoration:none;<br /> font-size:32px;<br /> font-family:Verdana, Geneva, sans-serif;<br /> font-weight:bold;<br /> text-shadow:1px 1px 2px white;<br /> }<br />
To add a button simple attach the t4d_button class to a div.
You may want to adjust the text size,button width&height,colors,etc...

If you need help with changing anything on this button class please ask in the comment section below. :)

PS: Sorry for adding the links to the button above, but adding a "#" as the href ; blogger replaces it with some random string :D
PS2: Works best in Chrome... :)