The other day a post was published on Hongkiat showing how to make a button using CSS (Cascading Style Sheets) only. However it was misleading, the CSS only button also used JavaScript, and an image or 2. It was actually a really simple button so I thought I would rebuild it myself and explain what I did and why.
Note that to get the full effect you need to use a webkit based browser, Chrome or Safari will do it. Other browsers looks pretty good (namely Firefox and Opera) and IE looks like pants, but in all cases the button will still work as a button. Progressive Enhancement FTW
1. Getting started
Let's start with the markup. Some very simple html is all that's needed for this button to work.
<html> <head> <title>CSS Only Button Demo</title> </head> <body> <p><a href="#" class="button">Download</a></p> </body> </html>
2. Basic Styles
Let's get the basic styles working first. Most of this stuff will work in all browsers. There's some width, padding, background colours and borders. The least used part is the rounded corners which are actually part of the CSS 2 specification. More and more sites are using these as they work fine in all browsers (apart from IE where you simply keep your normal square corners).
<style>
a.button {
font-size:30px;
color:#000;
text-decoration:none;
display:block;
width:578px;
padding:10px;
border:1px solid #DDD;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
a.button:hover {
color:#fff;
border-color:#3278BE;
}
</style>
3. CSS3 Background Gradients
The first of the CSS3 attributes is the background gradient. Currently this only works in Firefox and Chrome, and they both need different formats for inserting the gradient. There's a cool CSS gradient generator over on Westciv.com, which was most helpful for me getting the correct structure in the code.
The basic format looked like this. Notice that the background-image was inserted 3 times. Firstly a fallback for any browsers that don't support gradients, then a gradient for Webkit and finally the Firefox gradient.
background:#FFFFFF; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEE)); background:-moz-linear-gradient(0% 90% 90deg, #EEE, #FFF);
4. Custom Fonts
I decided not to replicate the font used in the original tutorial exactly for the simple reason that it would only work consistently as an image. Instead in my example I am using the recently released custom Google fonts. These are really easy to include. All you have to do is load the font using a piece of html that Google provide, and then use the font in your css as you would any normal font.
The Google font code boils down to something like this:
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
<style>
a {
font-family: 'Yanone Kaffeesatz', arial, serif;
}
</style>
5. Animation
So far everything above will have worked great in Firefox, Chrome, Safari and Opera. The fading animations don't work properly in anything. In general the css transitions only work in webkit based browsers, but it seems you can't (currently?) fade between different gradient background images - which means the background swaps instantly without any pretty fading. Regardless I think there's a lot of potential for css transitions, so am including the code anyway.
a.button {
... other styles ...
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
Currently the transitions are webkit only however I have added the mozilla (Firefox) and Opera browser prefixes in preparation for when they are added. Then my site will automatically take advantage of them without any additional work.
6. Bonus: Active State
As a bonus I thought it would be nice to add an active state to the link. This means that the button changes how it looks when it is clicked. The obvious thing to do was to flip the gradient hover (so it looks inset). So I added a new css definition for that.
a.button:active {
background:#4195DD;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#003C82), to(#4195DD));
background:-moz-linear-gradient(0% 90% 90deg, #4195DD, #003C82);
}
Cool! I like the CSS transitions. Thanks for this CSS only buttons, codes saved for future reference.
June 4, 2010 • @amorfrancis
Glad you found it interesting
I only learnt about the transitions recently and they're really cool. They do actually work a lot better when you use image backgrounds as everything becomes even smoother.
Now I'm trying to think of ways I can use it on here.
June 4, 2010
Looks fantastic in Chrome/Firefox, but I just received a blank box (text not visible) in IE7. Considering that over 80% of corporate users are on IE, it would be worthwhile to at least make the text visible.
July 24, 2010
Wow! I really love it. Very professional and clean. Thanks for this one. Is it compatible with IE6 or 7 now?
November 29, 2010 • @drebnbits
Hi - glad you like it. The link will always work with old versions of IE (6 & 7) but it will always look a bit strange and never function 100% correctly I am afraid,
November 29, 2010
Very nice...lots of tutorials out there that don't work or require images. You've provided a crisp, robust solution. Many thanks!
December 3, 2010
How to make it work in IE8 or IE9?
February 28, 2011
You'd need to create some sort of image based fallback however that's not the point of the article I'm afraid.
March 9, 2011
Thank you for the guide! I'm just starting to get into CSS and this was way more useful than the W3Schools tutorial.
March 10, 2011
Thanks a lot..! Great tutorial....:)
March 13, 2011
Thanks Ben, just needed a recap on styling CSS Buttons and your tutorial did the job. The custom font code will come in handy, I didn't know you could do that.
Many Thanks
March 10, 2012 • @cjc1867
thanks .. it really helps a lot ..
July 8, 2012
Ok, thank you for demo!
September 27, 2012
Thanks for this, CSS is great if you fully understand how to use it.
June 12, 2013