Skip to content

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);
}

Share

Join me, Amor, payroll, Dreb. They're all chatting about "CSS Only Button – Redux" below ›

Read Comments

17 Comments »

    • 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.

  1. Pingback: Notable Tech Posts – 2010.06.06 | The Life of Lew Ayotte
  2. 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.

    • 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,

  3. Very nice…lots of tutorials out there that don’t work or require images. You’ve provided a crisp, robust solution. Many thanks!

  4. 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

Comments are closed. Let's continue the conversation on Twitter.
css.php