OllyHodgson/buttons.html

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