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 :)
2nd of September, 2010 at 12:49
I need a submit button , too
when is V 2.0 ready ?
2nd of September, 2010 at 22:34
Love it. Will v2.0 be compatible with IE8?
2nd of September, 2010 at 22:39
Hi, v2 will be out in September; mid to late, so look out for an update then.
I’m going to add the following requests:
- using css3 for compatible browsers
- adding ie8 and ie9beta to compatibility list
- adding button tag to css
ปุ่มสวยๆด้วยเทคนิค CSS & jQuery | ไอทีสนุกดอทคอม
15th of September, 2010 at 06:28
[...] Pure CSS [...]
21st of September, 2010 at 15:06
Hi !
Good news about the upcoming v2 !
I’ve been using these buttons in a couple of projects. These are great !
21st of September, 2010 at 21:02
Thank you! Expect some solid updates at the end of the month or so.
28th of September, 2010 at 17:34
First thanks for taking the time to build these buttons and share them. I’m really new to design and I was trying to follow your tutorial but wasn’t able to get the buttons to work. I’m sure it’s user error on my end. What’s tripping me up is (1 I am not sure if I just add these changes to the style sheet. 2) I have to use all the info in all 4 style sheets that are in the download that you have and the images or just code you listed for the example. Basically I’m lost.
If you have a opportunity to give me a tip that would great.
5th of October, 2010 at 14:11
Hi Douglas, if you use the contact form to email me your problems I’ll more than happy to you help you out.
12th of December, 2010 at 01:04
Thanks! This looks great for my form.
Call to Action Button | Netclosing
5th of April, 2011 at 10:08
[...] http://www.halmatferello.com/journal/pure-css-buttons/ [...]
22 CSS Button Styling Tutorials and Techniques
8th of April, 2011 at 13:20
[...] and color adjustable buttons with CSS, we are able to change the verbiage and colors with ease.Pure CSS ButtonsLink : Visit Tutorial » Description : This is simple and effective way to have buttons that scale [...]
10+ Css Button Designs - Css Tutorials
19th of April, 2011 at 20:14
[...] [...]
tutorial freak
13th of January, 2012 at 01:23
tutorial freak…
[...]Pure CSS Buttons, Design {Halmat Ferello}[...]…