simon-engledew · September 23, 2010 10:12
diff --git a/GoogleButtons.html b/GoogleButtons.html
 <html>
 <head>
  <style>
    input[type="button"]::-moz-focus-inner
    {
      border: 0;
    }

    .button, input[type="button"], input[type="submit"]
    {
      border: solid 1px #999;
      border-top-color: #ccc;
      border-left-color: #ccc;
      padding: 7px 6px;
      display: inline-block;
      -webkit-box-shadow: inset 0 1px #fff;
      -moz-box-shadow: inset 0 1px #fff;
      box-shadow: inset 0 1px #fff;
      background: -webkit-gradient(linear, center top, center bottom, from(#f1f1f1), to(#dfdfdf));
      background: -moz-linear-gradient(top, #f1f1f1, #dfdfdf);
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#f1f1f1", endColorstr="#dfdfdf");
      position: relative;
      text-decoration: none;
      line-height: 100%;
      font: 11pt Helvetica;
      color: #000;
      text-shadow: 0 1px #fff;
      outline: none;
    }

    .button:after
    {
      display: block;
      position: absolute;
      content: '';
      bottom: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border-bottom: solid 1px #d7d7d7;
    }

    .button:before
    {
      border-bottom: solid 1px #f1f1f1;
      border-right: solid 1px #f1f1f1;
      display: block;
      position: absolute;
      top: 1px;
      left: 1px;
      height: 100%;
      width: 100%;
      content: '';
    }

    .button:active:after
    {
      visibility: hidden;
    }

    .button:active, input[type="button"]:active, input[type="submit"]:active
    {
      background: #ccc;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      text-shadow: 0 1px #e0e0e0;
    }

  </style>
 </head>
 <body>
  <a href="#" class="button">Google Search</a>
  <input type="button" value="Google Search" />
 </body>
 </html>
	<html>
	<head>
	<style>
	input[type="button"]::-moz-focus-inner
	{
	border: 0;
	}

	.button, input[type="button"], input[type="submit"]
	{
	border: solid 1px #999;
	border-top-color: #ccc;
	border-left-color: #ccc;
	padding: 7px 6px;
	display: inline-block;
	-webkit-box-shadow: inset 0 1px #fff;
	-moz-box-shadow: inset 0 1px #fff;
	box-shadow: inset 0 1px #fff;
	background: -webkit-gradient(linear, center top, center bottom, from(#f1f1f1), to(#dfdfdf));
	background: -moz-linear-gradient(top, #f1f1f1, #dfdfdf);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#f1f1f1", endColorstr="#dfdfdf");
	position: relative;
	text-decoration: none;
	line-height: 100%;
	font: 11pt Helvetica;
	color: #000;
	text-shadow: 0 1px #fff;
	outline: none;
	}

	.button:after
	{
	display: block;
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-bottom: solid 1px #d7d7d7;
	}

	.button:before
	{
	border-bottom: solid 1px #f1f1f1;
	border-right: solid 1px #f1f1f1;
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	height: 100%;
	width: 100%;
	content: '';
	}

	.button:active:after
	{
	visibility: hidden;
	}

	.button:active, input[type="button"]:active, input[type="submit"]:active
	{
	background: #ccc;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	text-shadow: 0 1px #e0e0e0;
	}

	</style>
	</head>
	<body>
	<a href="#" class="button">Google Search</a>
	<input type="button" value="Google Search" />
	</body>
	</html>