Skip to content

Instantly share code, notes, and snippets.

@itspriddle
Created January 12, 2011 23:47
Show Gist options
  • Select an option

  • Save itspriddle/777126 to your computer and use it in GitHub Desktop.

Select an option

Save itspriddle/777126 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>CSS3 button example</title>
<link rel="stylesheet" href="css/reset.css" media="screen">
<style>
body {
background: #ddd;
font-family: "helvetica neue", helvetica, arial, sans-serif;
margin: 70px 0 0 0;
text-rendering: optimizeLegibility;
}
#container {
margin: 300px auto;
width: 200px;
}
button {
background: #3b88d8;
background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
border-top: 1px solid #4081af;
border-right: 1px solid #2e69a3;
border-bottom: 1px solid #20559a;
border-left: 1px solid #2e69a3;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
color: #fff;
font-family: "lucida grande", sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 1;
padding: 3px 0 5px 0;
text-align: center;
text-shadow: 0 -1px 1px #3275bc;
width: 112px;
-webkit-background-clip: padding-box;
}
button:hover {
background: #2a81d7;
background: -moz-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
border-top: 1px solid #2a73a6;
border-right: 1px solid #165899;
border-bottom: 1px solid #07428f;
border-left: 1px solid #165899;
-moz-box-shadow: inset 0 1px 0 0 #62b1e9;
-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
cursor: pointer;
text-shadow: 0 -1px 1px #1d62ab;
-webkit-background-clip: padding-box;
}
button:active {
background: #3282d3;
border: 1px solid #154c8c;
border-bottom: 1px solid #0e408e;
-moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
-webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
text-shadow: 0 -1px 1px #2361a4;
-webkit-background-clip: padding-box;
}
button[disabled],
button[disabled]:hover,
button[disabled]:active {
background: #999;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dadada), to(#f3f3f3));
border-top: 1px solid #c5c5c5;
border-right: 1px solid #cecece;
border-bottom: 1px solid #d9d9d9;
border-left: 1px solid #cecece;
color: #8f8f8f;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
cursor: not-allowed;
text-shadow: 0 -1px 1px #ebebeb;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
</style>
</head>
<body>
<section id="container">
<button>Download iTunes</button>
</section>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment