Line25

How To Create a Stylish Button Entirely with CSS3

Read the full post

A week or two ago I posted a CSS basics tutorial on how to create a simple button graphic using image sprites. By popular demand in the comments we’ll now look at creating a similar button style graphic, but entirely with CSS. Let’s look at how CSS gradients, shadows, borders and transitions can all be combined to create a stylish button for your website.

View the CSS button demo

The button we’ll be creating is based on the typical style found on almost any website. It’s uses a rounded rectangle ‘tablet’ style shape with gradients and fine borders providing subtle touch of depth to give a slight three dimensional appearance. The text on the button is also given some shading to give the impression of an inset effect.

View the CSS button demo

The HTML Structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="container">

	<a href="#" class="btn">Push</a>

</div>

</body>
</html>

The HTML for this demo is pretty simple, other than the basic document structure of Doctype, link to CSS stylesheet and page title, all we need is an anchor element. This particular anchor could easily be targeted with CSS seeing as it’s the only one on the page, but we’ll add class="btn", which would be more suitable for a live website build where there would be multiple links on a page, with only select ones needing to be actual button graphics.

The CSS Styling

a.btn {
	display: block; width: 250px; height: 60px;
	padding: 40px 0 0 0; margin: 0 auto;
}

The CSS file begins with some basic styling to set up the demo file, then we can begin styling the anchor element. Anchor elements are inline by default, so display: block; converts this to a block to allow a specific width and height to be added. Padding bumps down the text away from the top edge of the button and margin is used to centre up the button on the demo.

a.btn {
	display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
	
	background: #398525; /* old browsers */
	background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
}	

Next we can begin styling the button with a coloured background, this is where CSS gradients come in handy. Two colour swatches are converted into gradient syntax for both Mozilla and Webkit browsers using the handy CSS Gradient Generator, then a fallback option of a flat colour is added for non-supporting browsers.

a.btn {
	display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
	
	background: #398525; /* old browsers */
	background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
	
	box-shadow: inset 0px 0px 6px #fff;
	-webkit-box-shadow: inset 0px 0px 6px #fff;
	border: 1px solid #5ea617;
	border-radius: 10px;
}

The CSS3 box-shadow property can then be used to create an inner glow effect much like in Photoshop. Adding inset to the code will place the glow on the inside of the element, as opposed to the outside. We’re not offsetting the shadow on either axis, but we are blurring it by 6px to soften the flow effect.
A simple 1px green border frames the button, then the corners are removed using the border-radius property.

a.btn {
	display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
	
	background: #398525; /* old browsers */
	background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
	
	box-shadow: inset 0px 0px 6px #fff;
	-webkit-box-shadow: inset 0px 0px 6px #fff;
	border: 1px solid #5ea617;
	border-radius: 10px;
	
	font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
	text-transform: uppercase; text-decoration: none;
	color: #147032;
	text-shadow: 0px 1px 2px #b4d1ad;
}

Now the overall button graphic is styled up we can move onto the actual text. The font is set up using CSS shorthand, specifying 55px Helvetica in bold. text-align, text-transform and text-decoration centre up the text, convert it to capitals and removes the default underline found on links.
Finally the colour is set to a dark green, then text-shadow is used to create an inset effect. The light green shadow is offset by 1px on the Y-axis and blurred by 2px.

a.btn {
	display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
	
	background: #398525; /* old browsers */
	background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
	
	box-shadow: inset 0px 0px 6px #fff;
	-webkit-box-shadow: inset 0px 0px 6px #fff;
	border: 1px solid #5ea617;
	border-radius: 10px;
	
	font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
	text-transform: uppercase; text-decoration: none;
	color: #147032;
	text-shadow: 0px 1px 2px #b4d1ad;
	
	-moz-transition: color 0.25s ease-in-out;
	-webkit-transition: color 0.25s ease-in-out;
	transition: color 0.25s ease-in-out;	
}

	a.btn:hover {
		color: #145675;
		
		-moz-transition: color 0.25s ease-in-out;
		-webkit-transition: color 0.25s ease-in-out;
		transition: color 0.25s ease-in-out;
	}

All that’s left is to set up a simple hover state for the button. I was 50/50 whether to use different gradient colours for this demo, or whether to add some fancy CSS transitions. Unfortunately CSS gradients and transitions can’t be used together, so we’ll go with a simple colour change on the text. The transition code specifies the color property and tells the browser to ease between the two declarations within 0.25 seconds.
When the button is hovered with the mouse the button will fade to and from green and blue text.

The final CSS button

View the CSS button demo

Check out the demo to see the final CSS button in action. Our graphic is built using a mix of CSS gradients, borders and shadows to replicate effects that once could only be created in Photoshop. With today’s modern browsers of Firefox, Safari and Chrome all supporting these CSS3 properties you can quite safely add these fancy effects to your website designs.

View the CSS button demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

23 Comments

  1. Excellent just what i neede thank you

  2. ABDUL JANOO says:

    Cool work …….In future I will b using this

  3. Looks great!

    The blue on hover looks weird though, and maybe you should add in a active state that just adds an inner shadow?

  4. Matthias says:

    Really cool button Chris,

    maybe you could even spice it up a little by using: a.btn:active { -moz-transform: translate(0px, 3px); and -webkit-transform: translate(0px, 3px); }, so there's a response, when the button get's klicked…

  5. blokefrompoland says:

    Hi,

    There's no need to declare transitions to :hover as they have been defined for a element.

    I would also define gradients as below:

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525));
    background-image: -webkit-linear-gradient(top, #8DD297, #398525);
    background-image: -moz-linear-gradient(top, #8DD297, #398525);
    background-image: -ms-linear-gradient(top, #8DD297, #398525);
    background-image: -o-linear-gradient(top, #8DD297, #398525);
    background-image: linear-gradient(top, #8DD297, #398525);

    It includes Opera, new WebKit syntax, Opera, IE10 and proposed W3C syntax.

    Regards,

    Artur

  6. i don't hover color… But is nice tutorial.

  7. Joe Hewes says:

    Really nice look there – and all in CSS! May well try and get some of this going on!

  8. Beben Koben says:

    look so 3D…hihihihihi nice nice

  9. Jatin says:

    CSS-3 is "new" present for WWW. Awesome article.

  10. Actcom says:

    good procedure on creating stylish button with CSS

  11. vale says:

    It would be handy if you show also some changes in its aspect for the :active state of the link. Thus I think it'll give users a better feedback when they click on it.

  12. Nelson Israel says:

    why my comment doesnt appears?

  13. Nelson Israel says:

    Then, sorry for spamming, please delete this epic fail !

    As usual Chris, very helpfull job !

    But may I suggest something ?

    CSS3 make me thought about this old and creepy Internet Explorer…(old version like 7 or 8 but too many people keep using the ancestor).

    I know you build website, I know you're using a Mac so the question is :

    How could you test your under-construction website with IE when you're working on a Mac.
    I suppose that many people around are running on Mac (me included) and I spend too much time to find a great way to do it.

    Maybe it's time for a little article talking about this problem?

    Otherwise, Google is our friend huh?! haha

    Your #1 devoted french follower.

  14. Excellent, well written and informative piece of work. I commend your committment to the cause and will continue to enjoy your articles. Thanks

  15. Ashah888 says:

    will this work on all IE browsers too?

  16. dan says:

    http://crab-tree.com is now a worldwide web design services website

  17. nenad says:

    I'll try it out !

  18. LKenneth says:

    I love using CSS3 it is awesome thanks for the tut.

Sorry, comments are now closed