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