Creating buttons with CSS becomes a lot more comfortable. The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.
Update!
This example uses a small background gradient image to achieve the plastic look of the button. Click here for an updated version of the CSS buttons without any images at all.
The main CSS markup
.btn {
display: inline-block;
background: url(btn.bg.png) repeat-x 0px 0px;
padding:5px 10px 6px 10px;
font-weight:bold;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
border:1px solid rgba(0,0,0,0.4);
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}
By using RGBa color values, the button and text shadows always blend well with any color we’ll add to our button later on. No matter if we want the button to be green, red or blue. The code above always stays the same.
Using the common hex-values, we would get a result similar to the one on the right when hovering the button.
Adding the color
.blue {background-color: #CCCCCC; color: #141414;}
.blue:hover {background-color: #00c0ff; color: #ffffff;}
.green {background-color: #CCCCCC; color: #141414;}
.green:hover {background-color: #8aff00; color: #ffffff;}
.red {background-color: #CCCCCC; color: #141414;}
.red:hover {background-color: #ff004e; color: #ffffff;}
This is where we define the different color variations. All we need to change is the text- and background color along with the mouseover/hover values. To change the color of a button, just attach the corresponding class to the main button class.
Very nice lesson ;)
It’s perfect looks in FF, Safari and really bad in IE8. Will be fine if you post here fix for IE. Because some users still using this shity crap :(
I know. This is because there’s almost no support for CSS3 in IE8 by now.
To get buttons with rounded corners and / or dropshadows working in IE you still need to work with multiple background images. Although it’s not as nice & flexible as using only CSS, it is save across all browsers. Take a look at http://tr.im/LwHd for a good tutorial.
I know this method, but i prefer pure CSS’s solutions. So, I hope Microsoft make fix for IE8 (in older versions we never see it, as other things) in future, because all new browsers support it now. Anyway thank you!
By the way, very nice site :) And i’m waiting for new lessons!
Pingback: CSS3 Buttons Without Any Images - naioo.com – Design // Dev // Inspiration
Pingback: 20 CSS3 Tutorials and Techiques for Creating Buttons - Speckyboy Design Magazine
Pingback: 20 CSS3 Tutorials and Techiques for Creating Buttons · rogdykker
M$ have said that they will be supporting “Some” CSS3 in IE9 but there will be nothing in IE8.
As usual M$ are holding everyone back…
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: 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: 50 Advanced CSS3 Technniques and Tutorials » DJDESIGNERLAB – Find All Your Design Inspirations From This Laboratory
Pingback: Harika Css3 menu dersleri | web Design Source
Pingback: 10 CSS3 Tutorials & Techniques for creating buttons. « The Creative Project
Pingback: Pattern Inc » 12 Excellent CSS3 Button and Menu Techniques
Pingback: 12 Excellent CSS3 Button and Menu Techniques
Pingback: web design london, web designers london, london web design
Pingback: 12 Excellent CSS3 Button and Menu Techniques | Web design news and tutorials
Pingback: 12 Excellent CSS3 Button and Menu Techniques - Programming Blog
Hmm, these look really fab and professional, will definitely give them a try in my next project if I can
Stop whining. Forget about IE. So what if it looks like crap. That’s not the developer’s fault, it’s the fault of the person using IE”Hate” (or worse). Chances are the user will never know that the buttons look cooler in other browsers. So, don’t let myopic MS hold you hostage. Design and develop for those browsers that play by the rules and the people that have the sense to use them.
Pingback: 10 Simple to Follow CSS Button and Menu Tutorials | KEEMANXP.COM
Pingback: 12 Excellent CSS3 Button and Menu Techniques - www.huedesigner.com
Pingback: 17 CSS3 Button Styling tutorials and Techniques - Wsblogz.com – Web design magazine
Pingback: CSS3 Buttons examples
Pingback: 12 Excellent CSS3 Button and Menu Techniques | DESIGN
Pingback: 40+ Incredible CSS3 Techniques & Tutorials | Multy Shades
Pingback: 25 CSS3 Button Tutorials and Techniques | blogfreakz.com
Pingback: Cool list of css3 buttons without using any images | The best Tutorials
Pingback: 20 CSS3 Tutorials and Techiques for Creating Buttons | Pixelstore.us
Pingback: 30 Awesome and Essential CSS3 Tutorials, Techniques and Resources to Learn
Pingback: 22 Outstanding CSS3 Buttons Tutorials | Designs Mag
Pingback: CSS3实例:12个优秀的按钮和菜单
Pingback: 22 Essential Css3 Tutorials for Designers | Design Dim
Pingback: CSS3 Button Tutorials and Techiques Revisited | Speckyboy Design Magazine
Pingback: CSS3 Button Tutorials and Techiques Revisited | Programming Blog
Pingback: CSS3 Button Tutorials and Techiques Revisited- rampantdesigntools.com
Pingback: CSS3 Button Tutorials and Techniques Revisited | FlexLib
Pingback: CSS3 Button Tutorials and Techniques Revisited | Typography Blog
Pingback: CSS3 Button Tutorials and Techniques Revisited | Typography Blog
Pingback: CSS3 Button Tutorials and Techniques Revisited | Programming Blog
nice one… :)
Pingback: 12 Excellent CSS3 Button and Menu Techniques | SharkWeb
Pingback: 20 Excellent CSS Menu And Button Tutorials | VaneGraphics
Pingback: 12 Excelentes botones y menus CSS3 | Nicomann
Pingback: Beginner’s Guide to CSS3 | Technology Story
Pingback: Beginner’s Guide to CSS3 | Emre Saraçoğlu's Official Blog
Pingback: Beginner’s Guide to CSS3 « GFXForum.co
Pingback: PandaDesignRo.com » Cool list of css3 buttons without using any images
Pingback: 10 interesting CSS3 buttons tutorials
Pingback: Beginner’s Guide to CSS3 | 39Articles
Pingback: Excellent CSS3 Button and Menu Techniques | Techloadz.com
How can i download this secret png? (btn.bg.png)
Pingback: CSS3 Button Showcase - 25 Previews and Links to Tutorials | Hot List
Pingback: Best CSS3 Tutorials Of 2010
Pingback: Beginner’s Guide To CSS3 | How It's Easy (HIE) Computing community
Pingback: CSS Button Tutorial | mxTutorial.com
Pingback: Beautiful CSS3 Navigation and Button Tutorials | Tutsteps
Pingback: Top 10 Beautiful CSS3 Button Tutorials - HTML Recipe | HTML Recipe
Pingback: 24 best tutorial how to create sexy css3 buttons – CSS | Leoc magazine
Pingback: Top 40 CSS3 Tutorials and Techniques for Creating Cool Css3 Buttons | Free Software, Jquery, Desiging,Template, Tech News, Artie,music,Photoshop tutorial
Pingback: Blogging Well » Blog Archive » 20 CSS3 Tutorials and Techniques for Creating Buttons
Pingback: 20 Tutorials and Techniques about CSS3 for Button Creation | DesDevWeb
thanks for this pretty tutorial, :)
Pingback: 12 Excellent CSS3 Button and Menu Techniques | HowDoWeb
Pingback: How to Create Buttons Using CSS3 Techniques - 20 Ultimate Tutorials | Smashing Buzz
Pingback: 20 Excellent CSS3 buttons Techniques and Tutorials | 1step web design: Best for developer and designer
Pingback: CSS gradients. Tools and examples « Pages of Htoo-Sann-Chin
Pingback: 12 Excellent CSS3 Button and Menu Techniques | dhtml-menu-builder.com
very good!
Nice tutorial, i use dark buttons:
bg:#333
color:#000
and ofcourse text-shadow: 0px 1px;
Pingback: 25 Excellent CSS3 Button Tutorials | codeManiac - Snippets, Templates, API and the best developer content
Pingback: 12 Excellent CSS3 Button and Menu Techniques « « MegaTeacher | Let's start learning MegaTeacher | Let's start learning
Pingback: 10 Awesome CSS3 Button Tutorials And Examples | DJDESIGNERLAB
Pingback: 10 great CSS3 button to create tutorials and examples - Open News
Pingback: 10 Awesome CSS3 Button Tutorials And Examples - Неинтересный блогНеинтересный блог
Pingback: 8 Excellent CSS3 Button & Menu Tutorials | Tutsreflex