Pure CSS Buttons v1.0 by Halmat Ferello

A bit of info

This is simple and effective way to have buttons that scale (width-wise) without any weird browser-specific CSS (apart from IE6/7) or JavaScript implementations. Just using pure CSS goodness.

And since we should care about the user, the buttons also offer feedback - hence different images for :hover, :active CSS events.

Download the Pure CSS Buttons (v1.0)

Next version (v2.0):

  • More colours to pick from:
    • Orange
    • Blue
    • Purple
    • Black
    • Pink
  • 24bit Transparent PNG image

The buttons

The code

<a href="#" class="grey-button pcb">
<span>Grey button</span>
</a>
<a href="#" class="grey-disabled-button pcb">
<span>Grey disabled button</span>
</a>

What's it work on?

Compatible with:

  • Internet Explorer 6.0 - 7.0
  • Firefox 2.0 - 3.0.8
  • Safari 3.0 - 4.0 (beta)
  • Opera 9.2 - 9.62

If you have suggestions free feel to contact me

© Halmat Ferello 2009