Skip to content

Instantly share code, notes, and snippets.

@simon-engledew
Created September 23, 2010 10:12
Show Gist options
  • Save simon-engledew/593436 to your computer and use it in GitHub Desktop.
Save simon-engledew/593436 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment