Saturday, April 2, 2011

[CSS3] Free CSS3 button class

9 comments

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


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... :)

9 comments:

  1. Hi there! I happened to stumble across your link on the MIT admissions blogs and I have to say that I am impressed with your site. I am also applying to MIT this year and I am building a website to showcase my engineering project. This is really nice CSS and I think it will help improve the look of my site. However, I was wondering, do all major browsers support this code?

    Thanks,:)
    Eric

    ReplyDelete
  2. Sorry, I have just seen your comment.

    This post is 1 year old nad the CSS for those button is not really cross-browser.

    They look fine in Chrome,Safari,Opera and Firefox.
    They work fine in IE, but look strange. :)

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

    ReplyDelete
  4. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information?

    ReplyDelete
  5. This articles helps me more.Thanks for your sharing,I will pay more attentions to your blog. Looking forward to your better and better articles.See you next time.

    ReplyDelete
  6. I will check and use this CSS3 for my website. Thanks.

    ReplyDelete
  7. Where can I download the full templates and apply for my website?

    ReplyDelete
  8. Good tutorials about how to use CSS3. Thanks.

    ReplyDelete