|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Nice CSS3 Button</title> |
|
<style type="text/css" media="screen"> |
|
body { |
|
font: normal normal normal 1em/1.5em "Helvetica Neue", Arial, sans-serif; |
|
} |
|
|
|
.button { |
|
background: #1fa0ea; |
|
background-image: -webkit-gradient( |
|
linear, |
|
left bottom, |
|
left top, |
|
color-stop(0.5, rgba(255,255,255,0.025)), |
|
color-stop(0.5, rgba(255,255,255,0.1)) |
|
); |
|
background-image: -moz-linear-gradient( |
|
center bottom, |
|
rgba(255,255,255,0.025) 50%, |
|
rgba(255,255,255,0.1) 50% |
|
); |
|
border: 1px solid rgba(0,0,0,0.05); |
|
border-radius:15px; |
|
-o-border-radius:15px; |
|
-icab-border-radius:15px; |
|
-khtml-border-radius:15px; |
|
-moz-border-radius:15px; |
|
-webkit-border-radius:15px; |
|
-moz-border-radius:15px; |
|
box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.2); |
|
-o-box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.2); |
|
-icab-box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.2); |
|
-khtml-box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.2); |
|
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.2); |
|
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.2); |
|
color: #fff; |
|
display: block; |
|
font-size: 0.75em; |
|
font-weight: bold; |
|
letter-spacing: 0.075em; |
|
line-height: 1.5em; |
|
padding: 4px 6px 5px 6px; |
|
text-align: center; |
|
text-decoration: none; |
|
text-shadow: 1px 1px 1px rgba(0,0,0,0.35); |
|
text-transform: lowercase; |
|
width: 180px; |
|
} |
|
|
|
.center { |
|
position: absolute; |
|
margin-left: -90px; |
|
margin-top: -10px; |
|
left: 50%; |
|
top: 50%; |
|
} |
|
</style> |
|
</head> |
|
<body id="radius_tool"> |
|
<a href="#" class="button center">Create My Account</a> |
|
</body> |
|
</html> |
