CSS3 Buttons

Using a handful of CSS3 styles implemented by Webkit (Safari and Chrome) and Firefox browsers, I’ve recreated buttons which I previously did with images, all in some simple CSS. I used the following styles:

  • Background-image gradients
  • Border radius
  • Text shadow
  • Box shadow
  • Custom fonts

The page is shown here in an iframe: If you have a keen eye you’ll see I’m using some borders on the top and bottom to simulate bevels, I’m using a custom font, Sansation, courtesy of dafont.com, and the text shadows are cast upward when hoving over the button. Best part is, I’m using no javascript, and whenever I change the text of the buttons, I don’t have to re-export images with the correct text. Won’t the world

buy levitra oral jellyhttp://pharmacy7days-online.com/http://cialis7days-pharmacy.com/desyrel-price.php

be a lovely place when all browsers support the full HTML5/CSS3 spec?

2 Responses to “CSS3 Buttons”

  1. Nathan Garza Says:

    Wow, that’s awesome! The world will definitely be a better place when html5/css3 is fully supported everywhere.

  2. Jonathan Knapp Says:

    The world will be a better place when html4/css2 are fully supported everywhere too! :)

    j/k Nathan.