Ben
Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.
CSS Only Button – Redux
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);
}
