|
<!doctype html> |
|
<html> |
|
<head> |
|
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> |
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" > |
|
<title>css3 buttons</title> |
|
|
|
<style type="text/css"> |
|
body { |
|
background: url(http://helloburin.com/images/stones.png); |
|
margin: 0; padding: 0; |
|
} |
|
|
|
a.button { |
|
/* Default positioning of button */ |
|
display: block; |
|
margin: 10px auto; |
|
text-align:center; |
|
line-height: 46px; /* will keep the text vertically |
|
centered on the 46px high button */ |
|
|
|
|
|
|
|
/* Font styling */ |
|
font-family: Helvetica; |
|
font-size: 20px; |
|
font-weight: bold; |
|
text-decoration: none; |
|
text-transform: capitalize; |
|
|
|
border: 3px solid rgba(0,0,0,0.3); |
|
-webkit-border-radius: 12px; |
|
|
|
|
|
} |
|
a.white.button { |
|
color: #000; |
|
text-shadow: #fff 0px 1px 1px; |
|
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, |
|
color-stop(0,rgba(255,255,255,0.96)), color-stop(.5,rgba(196,196,196,0.84)), |
|
color-stop(.5,rgba(167,167,167,0.76)), color-stop(1.0, rgba(169,169,169,0.73))); |
|
} |
|
a.gray.button { |
|
color: #fff; |
|
text-shadow: #333 0px 1px 1px; |
|
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, |
|
color-stop(0,rgba(109,109,109,0.83)), color-stop(.5,rgba(20,20,20,0.8)), |
|
color-stop(.5,rgba(3,3,3,0.8)), color-stop(1.0, rgba(18,18,18,0.77))); |
|
} |
|
a.button:hover { |
|
color: #fff; |
|
text-shadow: #333 0px -1px 1px; |
|
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, |
|
color-stop(0,rgba(136,149,204,0.9)), color-stop(.5,rgba(34,57,160,0.76)), |
|
color-stop(.5,rgba(1,28,146,0.73)), color-stop(1.0, rgba(3,63,155,0.69))); |
|
} |
|
|
|
a.last.button { |
|
margin-top: 10px; |
|
} |
|
div.options-extend { |
|
padding: 20px 20px 15px; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
background: url(http://helloburin.com/images/options-extend.png) repeat-x top left; |
|
} |
|
|
|
</style> |
|
</head> |
|
|
|
<body> |
|
|
|
<div class="options-extend"> |
|
<a href="#" class="white button">Use As Wallpaper</a> |
|
<a href="#" class="white button">Email Photo</a> |
|
<a href="#" class="white button">Assign To Contact</a> |
|
<a href="#" class="last gray button">Cancel</a> |
|
</div> |
|
</body> |
|
</html> |
