Skip to content

Instantly share code, notes, and snippets.

@OllyHodgson

OllyHodgson/buttons.html

Created March 23, 2011 15:43
Show Gist options
  • Save OllyHodgson/883309 to your computer and use it in GitHub Desktop.
Save OllyHodgson/883309 to your computer and use it in GitHub Desktop.
Download ZIP
A nice CSS button style for <a> elements. Tested in IE6-9, Firefox 3.6-4, Chrome 11, Safari 5, Opera 11.
Raw
buttons.html
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<title>CSS Buttons</title>
<meta name="viewport" content="width=device-width, initial-scale=auto">
<style>
body {
font-family: Helmet, Freesans, sans-serif; /* See http://blog.mhurrell.co.uk/post/2946358183 */
font-size: 12px;
line-height: 1.4;
background-color: #fafafa;
color: #5a5b5d;
padding: 5em;
margin: 0;
vertical-align: baseline;
}
/* a.button
A raised button style for links.
Tested in IE6-9, Firefox 3.6-4, Chrome 11, Safari 5, Opera 11.
*/
a.button,
a.button:link,
a.button:visited {
display: inline-block;
vertical-align: bottom;
font-size: 1.083333em;
text-align: center;
text-decoration: none;
padding: 6px 14px;
margin: 0;
/* Create a subtly embossed border */
border: 0.083333em solid;
border-color: #C4C3BB #A4A399 #A4A399 #C4C3BB;
/* Use a background-image, then overlay a gradient if available.
Notes:
- I've applied graidents to IE9 separately.
- The .png contains two gradients for normal and hover states
- The .png is at http://imgur.com/x2Ckw, but you probably want to host it locally
- For IE6 I used TweakPNG to set the .png's bKGD chunk to match the button background
*/
background: #dadada url(http://i.imgur.com/x2Ckw.png) repeat-x 0 0; /* Should be #dedede but IE renders the PNG slightly darker, hence #dadada */
background-image: -o-linear-gradient(-90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%);
background-image: -moz-linear-gradient(-90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.05, #F5F5F5), color-stop(0.95, #DEDEDE), to(#CCCCCC));
background-image: linear-gradient(-90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%);
color: #272728;
text-shadow: 1px 1px 0 #FAFAFA;
/* Because slightly rounded corners are de-rigeur */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
/* Enhance the embossing if available */
-moz-box-shadow: -1px -1px 0 #CCCCCC inset;
-webkit-box-shadow: -1px -1px 0 #CCCCCC inset;
box-shadow: -1px -1px 0 #CCCCCC inset;
/* Fix a border-radius colour bleed issue in Chrome */
-webkit-background-clip: padding-box;
}
a.button:hover,
a.button:active,
a.button:focus {
/* Move the text slightly to make the button appear pressed */
padding: 7px 13px 5px 15px;
/* Invert the gradient to make the button appear pressed */
background-position: bottom left;
background-image: -o-linear-gradient(90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%);
background-image: -moz-linear-gradient(90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%);
background-image: -webkit-gradient(linear, left bottom, left top, from(#FFFFFF), color-stop(0.05, #F5F5F5), color-stop(0.95, #DEDEDE), to(#CCCCCC));
background-image: linear-gradient(90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%);
color: #181818;
/* Invert the emboss effect */
border-color: #A4A399 #C4C3BB #C4C3BB #A4A399;
-moz-box-shadow: 1px 1px 0 #CCCCCC inset;
-webkit-box-shadow: 1px 1px 0 #CCCCCC inset;
box-shadow: 1px 1px 0 #CCCCCC inset;
}
/* Hello keyboard users! */
a.button:active,
a.button:focus {
outline: 1px dotted #DEDDD8;
}
/* Gradients for IE9
YAY! The filters don't break ClearType anymore! Alas
they don't play nicely with border-radius so any more
than about 2px looks ming.
*/
.ie9 a.button,
.ie9 a.button:link,
.ie9 a.button:visited {
background-image: none;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC')";
}
.ie9 a.button:hover,
.ie9 a.button:active,
.ie9 a.button:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#F5F5F5')";
}
</style>
</head>
<body>
<h1>CSS Buttons!</h1>
<p>Here's some CSS buttons! View source to see how they're made.</p>
<p><a class="button" href="/">Make things happen</a> <a class="button" href="/">Do stuff</a> <a class="button" href="/">Wibble</a></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment