Life's easy with Medialoot.

Unlimited access for only $14/mo.

Free CSS3 Button Styles

preview of css3 only button styles for the web
preview of css3 only button styles for the web

This set contains a collection of elegantly simple web buttons, each designed in Adobe Photoshop and coded using HTML and CSS. They are fully scalable and pure CSS (don’t require any images at all). There are 16 preset buttons included and each one is very easy to modify and tweak to match the theme of your site.

Every button includes Normal, Hover and Active states.

Benefits for Premium Members

As usual with our freebies we try to give premium members a little something extra, so with this resource, all premium members will also get the original .psd file used to design the buttons.

Live Demo

View the live demo here

Browser Support

Works in all modern browsers, and degrades gracefully in Internet Explorer.

Free License

Feel free to download and use this item for both personal and commercial projects with attribution back to MediaLoot. Please note:

  • Attribution is required for free items. For a non-attribution license, please become a member or buy the full version.
  • You may not distribute or offer this set for download on other websites. Promotion is always appreciated, but please send people to this page.

More from User Interface » Coded Elements

Nov 26th 11 0
$10
Nov 25th 130379 21
Free

Comments

  • Reply »
    7OOOF.net

    7OOOF.net

    cool i lik it>> thanks

    Jan 23, 2012 at 12:27 pm
  • Reply »
    TutsPress

    TutsPress

    Cool buttons thanks you medialoot!

    Jan 24, 2012 at 9:25 am
  • Reply »
    Draco

    Draco

    my hat is off

    Jan 24, 2012 at 10:19 am
  • Reply »
    J2O

    J2O

    Not as great as some of the other stuff on Medialoot…. sorry!

    Jan 24, 2012 at 10:28 am
  • Reply »
    Nour Gamil

    Nour Gamil

    Cool ^______^

    Jan 24, 2012 at 10:29 am
  • Reply »
    J2O

    J2O

    ....hang on, these dont require images at all? ok now i get it… these are awesom!!

    Jan 24, 2012 at 10:30 am
  • Reply »
    Victor Edun

    Victor Edun

    Thanks for the great stuff. Well appreciated.

    Jan 24, 2012 at 11:51 am
  • Reply »
    Tony Thomas

    Tony Thomas

    Thanks for the comments :)

    @J20: You scared us for a second there! Glad you like them though

    Jan 24, 2012 at 12:12 pm
  • Reply »
    Matt Hagen

    Matt Hagen

    Very elegantly executed!

    Jan 24, 2012 at 2:03 pm
  • Reply »
    hs

    hs

    why would anyone assume the light source would move on click?
    the active state is designed a little bit… sloppy ;-)

    Jan 24, 2012 at 3:08 pm
  • Reply »
    marire sani

    marire sani

    Nice work….can’t wait for your next stuff.

    Feb 2, 2012 at 5:01 pm
  • Reply »
    Servidores virtuales privados

    Servidores virtuales privados

    Stylish and very well done.

    Feb 7, 2012 at 12:19 pm
  • Reply »
    Alan

    Alan

    How do I use these? I know how to use them, it’s just that the button won’t show up, only the link set to be the target for the button shows up. Any tips?

    May 8, 2012 at 6:48 pm
  • Reply »
    Tony Thomas

    Tony Thomas

    @Alan: It sounds like it’s not loading the CSS, check the header code in the html file to make sure it’s pointing to the right location for the styles.css file.

    May 9, 2012 at 10:24 am
  • Reply »
    Mobilio

    Mobilio

    Nice looking and great for implementing in a site. I don’t know why didn’t you consider some scaling/rotation/opacity change as a hover/click effects. What you have done is great but adding some king of dynamic animation would only attract the user’s attention more. Moreover CSS3 animations are not burdening the processor as much as jquery. However you have done really nice job!

    Aug 30, 2012 at 7:07 am

Leave a comment

Tag Cloud

Don't Miss Another Freebie - Sign Up for Our Newsletter!

Make sure you don't miss out on future free resources by signing up for our weekly newsletter.

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all