|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Button effect</title> |
|
|
|
<style> |
|
button { |
|
clear: left; |
|
display: block; |
|
float: left; |
|
width: 100%; |
|
cursor: pointer; |
|
display: inline-block; |
|
|
|
margin: 15px auto 22px; |
|
padding: 9px 14px 9px; |
|
|
|
background-color: #1799C4; |
|
background-repeat: repeat-x; |
|
background-image: -khtml-gradient(linear, left top, left bottom, from(#56C6EB), to(#1799C4)); |
|
background-image: -moz-linear-gradient(top, #56C6EB, #1799C4); |
|
background-image: -ms-linear-gradient(top, #56C6EB, #1799C4); |
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56C6EB), color-stop(100%, #1799C4)); |
|
background-image: -webkit-linear-gradient(top, #56C6EB, #1799C4); |
|
background-image: -o-linear-gradient(top, #56C6EB, #1799C4); |
|
background-image: linear-gradient(#56C6EB, #1799C4); |
|
border-color: #1799C4 #1799C4 #1487AD; |
|
|
|
color: white; |
|
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33); |
|
border: 1px solid #CCC; |
|
font-size: 16px; |
|
line-height: normal; |
|
|
|
-webkit-font-smoothing: antialiased; |
|
|
|
-webkit-border-radius: 6px; |
|
-moz-border-radius: 6px; |
|
border-radius: 6px; |
|
|
|
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); |
|
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); |
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); |
|
|
|
-webkit-transition: 0.1s linear all; |
|
-moz-transition: 0.1s linear all; |
|
transition: 0.1s linear all; |
|
} |
|
|
|
button:hover { |
|
background-position: 0 -15px; |
|
} |
|
|
|
button:active{ |
|
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); |
|
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); |
|
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); |
|
} |
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
|
|
<button>Hotel</button> |
|
|
|
</body> |
|
</html> |
