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.
An example:
<a href="#" class="grey-button pcb"> <span>Grey button</span> </a>
To absolute position the button, it is recommended to wrap a <div> around it. Like so:
<div id="example-grey-button"> <a href="#" class="grey-button pcb"> <span>Grey button</span> </a> </div>
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
Pure CSS Buttons, Design {Halmat Ferello} | Best Web Gallery
13th of April, 2009 at 21:23
[...] Pure CSS Buttons, Design {Halmat Ferello} [...]
4 CSS Buttons Tutorials
5th of May, 2009 at 21:05
[...] 3-Pure CSS Buttons [...]
22 CSS Button Styling Tutorials and Techniques : Speckyboy Design Magazine
27th of May, 2009 at 10:02
[...] Pure CSS Buttons [...]
遼二の四方山» Blog Archive » Pure CSS Buttons
14th of June, 2009 at 20:53
[...] -518px;}ボタンの変更ではclass名を変更するだけで適応できます。詳しくはPure CSS Buttonsで確認してください。最後にbackground-positionの変更もお忘れなく This [...]
buttons | blogfreakz.com
22nd of September, 2009 at 18:27
[...] Pure CSS Buttons [...]
Beautiful and Simple CSS Button Styling
6th of October, 2009 at 17:16
[...] Pure CSS Buttons Pure CSS Buttons [...]
22 tutoriels pour boutons CSS | WebCssDesign
8th of November, 2009 at 22:37
[...] Voir le Tutoriel [...]
9th of July, 2010 at 15:55
I need a submit button. D:
17th of July, 2010 at 11:19
I’m planning to get v2.0 coming out soon that will use CSS3 as well as images depending on the browser used. And you will get your submit button :)