There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some javascript. As it stands a lot of the modern browsers support the css we would like to use to create a nice looking button. Firefox, Safari and Opera all have support for rounder corners, box shadows and text shadows. What used to take six steps and lots of extra mark-up, images and css, now only takes three steps and some simple CSS3.
One of the great perks regarding this technique is that in the event that a user doesn't have a browser that supports the CSS that we will be using, they will still see a nice beveled button - it simply won't look quite as nice.
What We are Going To Do
To create a nice button we have a few major components:
- A nice background gradient
- Rounder corners
- Some nice borders to give it a 3D effect
- A drop shadow
- A text shadow (for a nice touch)
In the end we will have a button that looks just like this, only with out using any images behind a few pixel background gradient (and when CSS gradients are supported we can even remove that!).
The HTML
<p><a href="#">Example Button</a></p>
<p><a href="#">Example Button</a></p>
<p><a href="#">Example Button</a></p>As you can see the HTML is very basic, we essentially just need an anchor tag and text. The paragraph is there just to be semantic.
The CSS
.css3button a { background: url(background.gif) bottom repeat-x #9eabb3; padding: 5px 10px 5px 10px; text-align: center; font-weight: bold; color: #fff; text-decoration: none; border: 1px inset #aaa; -webkit-border-radius: 8px; width: auto; -moz-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 1px 1px 1px #666; -webkit-box-shadow: 1px 1px 1px #666; box-shadow: 1px 1px 1px #666; text-shadow: rgba(0,0,0, .5) 0px -1px 0px;border-top: inset 1px #ccc; border-left: inset 1px #ccc; border-bottom: solid 1px solid #000; border-right: 1px solid #666;} .css3button a:hover { background: #999; text-shadow: rgba(0,0,0, .5) 0px 1px 0px; }
The CSS is a bit more complicated, but still fairly simple. We are really just adding a repeating background image, adding some rounded corners, as well as box and text shadows. The borders add a bit more depth / shading and ensures that if the CSS properties are not supported that the element still retains a beveled appearance.
The background image is simple gradient to give the button some depth, in this case I used the following image:
That Simple
That is how easy it is. If you want to play around with the borders you can end up with some pretty nice effects as well.
Examples
Have some feedback? Leave a comment
You can even add shadow for ie
a {
zoom:1;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=’#666666′);
}
Great tip Alexander, I will give that a shot!
nice trick there. haha pretty cool!
great outcome in such a simple way! I loved to see the proper way to support old browsers.
Thx
Pingback: Create a CSS3 Button That Degrades Nicely | Design Newz
Pingback: 88 liens sur Wordpress, jQuery, typographie, CSS, webdesign …
Pingback: GuyTouch » 88 lien pour Worpress, jquery, javascript, tout pour le web
Thanks for the tutorial definitely something that I am keen to put to use soon.
Pingback: Podcast #75: Jeremy Keith Interview, Google Wave « AccessTech News
Pingback: Podcast #75: Jeremy Keith Interview, Google Wave « The BAT Channel
Pingback: Больше, больше эффектов c CSS3! | rotorweb.ru | Проблемы и решения в Web-дизайне
Thank you good article
Pingback: Designing CSS Buttons: Techniques and Resources - Smashing Magazine
Pingback: typoglyphic.com » Designing CSS Buttons: Techniques and Resources – Smashingmagazine.com
Pingback: Designing CSS Buttons: Techniques and Resources | Buddy's Blog
Pingback: Designing CSS Buttons: Techniques and Resources | Buddy's Blog
Pingback: Designing CSS Buttons | Rolandyh Blogging
This is awesome! nice job I love it!
Pingback: All about Buttons, Buttons … & Buttons (CSS, Glowing, Javascript, Advance) | Ajax CSS and WEB2.0 Resource Directory. Ajax Effects, Components Drag Drop, CSS Gallery, AJAX CSS PHP Tutorial AjaxCSS.com
I personally like it the only issue i see is that background image being to small, however I am on Chrome Mac Beta currently and they have some styling issues to work out that I know of .
great outcome in such a simple way! I loved to see the proper way to support old browsers…
Pingback: 20 CSS3 Tutorials and Techiques for Creating Buttons - Speckyboy Design Magazine
Pingback: 20 CSS3 Tutorials and Techiques for Creating Buttons « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
Pingback: 20 + CSS3 Tutorials and Techiques for Creating Buttons | Seventy Seven magazine
Pingback: 10 Amazing CSS3 Tutorials and Techiques for Creating Buttons | denbagus blog
Pingback: 20 CSS3 Tutorials and Techiques for Creating Buttons | The New Drop
Pingback: 20 CSS3 Tutorials and Techiques for Creating Buttons | The New Drop
Pingback: 20 CSS3 Tutorials and Techiques for Creating Buttons | The New Drop
Pingback: Designing CSS Buttons: Techniques and Resources | WebsGeek
Pingback: Bookmarks for March 15th from 01:20 to 01:23 | Travis' Blog
Pingback: Create a CSS3 Button That Degrades Nicely | LearnersTutorials
Pingback: 20 CSS3 Tutorials for Creating Buttons | KSSP
Pingback: Harika Css3 menu dersleri | web Design Source
Pingback: Harika CSS3 Menü Dersleri | Sorbize
Pingback: 45 Resources & Tutorials for designers and developers | Webdevtuts
Perfect, thanks
Pingback: 40 + Awesome and Essential CSS3 Tutorials, Techniques and Resources to Learn | Design | Webdesign, website & webshop maken portfolio
Неплохие примерчики.
rusio.net
%100 Doğal ve hiç bir yan etkisi olmayan Uzamax’ı keşfedin
UZAMAX içeriğinde mineral ve vitaminler barındıran, doğal bitkielerden üretilmiş gıda desteğidir. İçeriğinde herhangi bir kimyasal ürün bulunmamakla birlikte tamamen doğal kurutulmuş bitkisel bir karışımdır. Sadece birkaç aylık kullanım kürü sonrasında bile uzamax’ın etkisini hissedeceksiniz.
Uzamax kullanarak doğal yollarla bünyenize gerekli olan tüm besin, vitamin ve mineralleri vücudunuza almanızı sağlar.izlanda yosun hapı
Pingback: 原版 Readability Bookmarklet « 二師兄的筆記部落格
Pingback: Today in Web » 15 Excellent Resources for Creating CSS3 Buttons and Menus
Pingback: 150+ CSS3 tutorials and exercises for web developers « Design and Development tuts – TutorialShock
Pingback: PandaDesignRo.com » Cool list of css3 buttons without using any images
Pingback: Diseño Web: 10 colecciones de botones CSS3 listos para usar | CreativaSfera - Sandra Guerrero Sanmartí
Pingback: Pop References In Britney Spears’ ‘I Wanna Go’ Video « dariushoper
cappotti, sciarpe, abiti, stivali, abbigliamento spotivo ed invernale, calde felpe ed eleganti maglioni Moncler.Se non hai voglia di muoverti puoi acquistare on line.
Too complicated production process and adornment often gild the lily, will attract the attention of the viewer to marriage gauze details and ignores the mistress of the marriage gauze of beauty. Especially those the skirt pile of compose full of big flower, marriage gauze to look like. Don’t know So Europe and the marriage gauze of concise, easy advocate the style. Of course, the appropriate bead embroiders, the bud silk, bowknot, ribbons is also essential to marriage gauze of the pen that nods eyeball. As if some brand clothing of the AD copy: contracted and not simple.
Pingback: CSS3 tutorials, 150+ exercises for web developers
Pingback: CSS button, 110 best!
Pingback: 150+ CSS3 tutorials and exercises for web developers - DesignShock