How To Create a Stylish Button Entirely with CSS3
A week or two ago I posted a CSS basics tutorial on how to create a simple button graphic using image sprites. By popular demand in the comments we’ll now look at creating a similar button style graphic, but entirely with CSS. Let’s look at how CSS gradients, shadows, borders and transitions can all be combined to create a stylish button for your website.
The button we’ll be creating is based on the typical style found on almost any website. It’s uses a rounded rectangle ‘tablet’ style shape with gradients and fine borders providing subtle touch of depth to give a slight three dimensional appearance. The text on the button is also given some shading to give the impression of an inset effect.
The HTML Structure
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 Button</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="container"> <a href="#" class="btn">Push</a> </div> </body> </html>
The HTML for this demo is pretty simple, other than the basic document structure of Doctype, link to CSS stylesheet and page title, all we need is an anchor element. This particular anchor could easily be targeted with CSS seeing as it’s the only one on the page, but we’ll add class="btn", which would be more suitable for a live website build where there would be multiple links on a page, with only select ones needing to be actual button graphics.
The CSS Styling
a.btn {
display: block; width: 250px; height: 60px;
padding: 40px 0 0 0; margin: 0 auto;
}
The CSS file begins with some basic styling to set up the demo file, then we can begin styling the anchor element. Anchor elements are inline by default, so display: block; converts this to a block to allow a specific width and height to be added. Padding bumps down the text away from the top edge of the button and margin is used to centre up the button on the demo.
a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
}
Next we can begin styling the button with a coloured background, this is where CSS gradients come in handy. Two colour swatches are converted into gradient syntax for both Mozilla and Webkit browsers using the handy CSS Gradient Generator, then a fallback option of a flat colour is added for non-supporting browsers.
a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
}
The CSS3 box-shadow property can then be used to create an inner glow effect much like in Photoshop. Adding inset to the code will place the glow on the inside of the element, as opposed to the outside. We’re not offsetting the shadow on either axis, but we are blurring it by 6px to soften the flow effect.
A simple 1px green border frames the button, then the corners are removed using the border-radius property.
a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
text-transform: uppercase; text-decoration: none;
color: #147032;
text-shadow: 0px 1px 2px #b4d1ad;
}
Now the overall button graphic is styled up we can move onto the actual text. The font is set up using CSS shorthand, specifying 55px Helvetica in bold. text-align, text-transform and text-decoration centre up the text, convert it to capitals and removes the default underline found on links.
Finally the colour is set to a dark green, then text-shadow is used to create an inset effect. The light green shadow is offset by 1px on the Y-axis and blurred by 2px.
a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
text-transform: uppercase; text-decoration: none;
color: #147032;
text-shadow: 0px 1px 2px #b4d1ad;
-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
a.btn:hover {
color: #145675;
-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
All that’s left is to set up a simple hover state for the button. I was 50/50 whether to use different gradient colours for this demo, or whether to add some fancy CSS transitions. Unfortunately CSS gradients and transitions can’t be used together, so we’ll go with a simple colour change on the text. The transition code specifies the color property and tells the browser to ease between the two declarations within 0.25 seconds.
When the button is hovered with the mouse the button will fade to and from green and blue text.
The final CSS button
Check out the demo to see the final CSS button in action. Our graphic is built using a mix of CSS gradients, borders and shadows to replicate effects that once could only be created in Photoshop. With today’s modern browsers of Firefox, Safari and Chrome all supporting these CSS3 properties you can quite safely add these fancy effects to your website designs.
Excellent just what i neede thank you
Cool work …….In future I will b using this
Looks great!
The blue on hover looks weird though, and maybe you should add in a active state that just adds an inner shadow?
Really cool button Chris,
maybe you could even spice it up a little by using: a.btn:active { -moz-transform: translate(0px, 3px); and -webkit-transform: translate(0px, 3px); }, so there's a response, when the button get's klicked…
Totally agree, I expected it to actually "PUSH" :)
An additional inset box-shadow would also look great, i guess. Something like "box-shadow: inset 0px 0px 6px grey"…
Hi,
There's no need to declare transitions to :hover as they have been defined for a element.
I would also define gradients as below:
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525));
background-image: -webkit-linear-gradient(top, #8DD297, #398525);
background-image: -moz-linear-gradient(top, #8DD297, #398525);
background-image: -ms-linear-gradient(top, #8DD297, #398525);
background-image: -o-linear-gradient(top, #8DD297, #398525);
background-image: linear-gradient(top, #8DD297, #398525);
It includes Opera, new WebKit syntax, Opera, IE10 and proposed W3C syntax.
Regards,
Artur
i don't hover color… But is nice tutorial.
If you don't see the hover color, what web browser are you using?
Really nice look there – and all in CSS! May well try and get some of this going on!
look so 3D…hihihihihi nice nice
CSS-3 is "new" present for WWW. Awesome article.
good procedure on creating stylish button with CSS
It would be handy if you show also some changes in its aspect for the :active state of the link. Thus I think it'll give users a better feedback when they click on it.
why my comment doesnt appears?
fail O_o
Then, sorry for spamming, please delete this epic fail !
As usual Chris, very helpfull job !
But may I suggest something ?
CSS3 make me thought about this old and creepy Internet Explorer…(old version like 7 or 8 but too many people keep using the ancestor).
I know you build website, I know you're using a Mac so the question is :
How could you test your under-construction website with IE when you're working on a Mac.
I suppose that many people around are running on Mac (me included) and I spend too much time to find a great way to do it.
Maybe it's time for a little article talking about this problem?
Otherwise, Google is our friend huh?! haha
Your #1 devoted french follower.
Excellent, well written and informative piece of work. I commend your committment to the cause and will continue to enjoy your articles. Thanks
will this work on all IE browsers too?
Dont even think about it if you are using IE less than 9.0 version.
LOLz,,,
http://crab-tree.com is now a worldwide web design services website
I'll try it out !
I love using CSS3 it is awesome thanks for the tut.