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 as the CSS-only button also used JavaScript and an image or two. It was actually a simple button, so I decided to rebuild it myself and explain what I did and why.
Note that to experience the full effect, you need to use a webkit-based browser like Chrome or Safari. Other browsers look pretty good (namely Firefox and Opera), but IE looks less appealing. However, in all cases, the button will still work as intended. Progressive Enhancement FTW
CSS Button Example
1. Getting started
Let’s start with the markup. All you need is some very simple HTML 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
First, let’s get the basic styles working. Most of these styles will work in all browsers: width, padding, background colors, borders etc. The least used part is the rounded corners which are actually part of the CSS 2 specification. More and more sites are using these because they work fine in all browsers except IE where square corners are retained.
<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 CSS3 attribute we will cover is the background gradient. Currently, this only works in Firefox and Chrome, and they require different formats for inserting the gradient. You can use a CSS gradient generator on Westciv.com to help you get the correct structure in your code.
The basic format looks like this. Take note that the background-image is inserted three times - firstly as a fallback for browsers that don’t support gradients, then as a gradient for Webkit, and finally as a 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 Google Fonts
Instead of replicating the font used in the original tutorial exactly (which would only work consistently as an image), I’m using Google fonts in my example. These are really easy to use; you load the font using a piece of HTML provided by Google, and then include it in your CSS like any normal font.
The Google font code looks 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 work great in Firefox, Chrome, Safari, and Opera. However, the fading animations don’t work properly in other browsers. Generally, CSS transitions only work in webkit-based browsers. Currently, you can’t fade between different gradient background images - which means the background swaps instantly without any smooth fading. Regardless of this limitation, CSS transitions have a lot of potential, so I’m 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’ve added Mozilla (Firefox) and Opera browser prefixes in preparation for when they are added. This way my site will automatically take advantage of them without any additional work.
6. Bonus: Active State
As a bonus feature I thought it would be nice to add an active state to the link. This means that the button changes its appearance when 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);
}
How was it for you? Let me know on BlueSky or Mastodon
(Please) Link to this page
Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.
Join the Ninja Sparks Newsletter!