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. Web Design Company MumbaiJune 22, 2011 at 9:06 AM

    Ncie ans simple Css code.

    ReplyDelete
  2. AnonymousDecember 23, 2011 at 7:50 PM

    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
  3. tips4designJanuary 12, 2012 at 10:31 AM

    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
  4. Ganeshan NadarajanJanuary 7, 2013 at 2:01 PM

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

    ReplyDelete
  5. Web Design CompanyMay 31, 2013 at 11:48 AM

    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
  6. Seo web solutionsJune 4, 2013 at 3:30 PM

    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
  7. Twin Cities WDJanuary 11, 2014 at 6:47 AM

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

    ReplyDelete
  8. MN Internet MarketingJanuary 11, 2014 at 6:48 AM

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

    ReplyDelete
  9. Faribault Web DesignMarch 26, 2014 at 8:53 PM

    Good tutorials about how to use CSS3. Thanks.

    ReplyDelete