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

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

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

Related Posts

20 Feb 2014

Fixing CSS Transitions in Google Chrome

I had a weird problem yesterday where I had applied a css transition to an element that was fading from opacity:0.1 to opacity:1 – and along the way it seemed to change in size or position.The reason for the change...
03 Sep 2008

Chrome – first thoughts

Yesterday Google released Chrome, a brand new web browser onto an unsuspecting internet. You’ve probably been inundated with all sorts of opinions and views on it, but I’m going to give me tuppence as well.Plus It’s fast. Very fast Webkit...
17 Feb 2024

Creating a Custom HTML Elements: A Colour Picker

I recently needed to create my first custom element - a custom color picker. I wanted to improve the color picker feature on Brush Ninja however I couldn’t find an existing solution that met my needs so I decided to...
25 Dec 2012

Learning to Accept CSS3: Creating CSS3 Windows

People are resistant to change. It’s strange since I consider myself quite forward thinking, but I still find it takes me a while to accept new things. I’ve been using CSS3 effects for quite a while now – as have...
21 Jun 2023

Removing Google fonts

Have you ever stopped to think about the impact of the fonts you use on your website? Well, a few years ago, I did. And that’s when I decided to bid farewell to Google Fonts.As someone who loves creating interesting...
10 Jul 2023

Firefox Extensions I Can't Live Without v2

Back in 2007, I wrote a blog post about my favorite Firefox extensions that I used all the time. However, over the years, my browsing habits changed, and I eventually switched to Chrome. But now, I’m back to using Firefox...