<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>For tests // 28/12/11</title>
<style type="text/css">
a {text-decoration:none;}
.button {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5d900), color-stop(100%,#f5b000));
background: -moz-linear-gradient(center top, #f5d900 0%, #f5b000 100%);
-webkit-box-shadow: 0px 5px 0px 0px rgba(224, 126, 0, 1);
-moz-box-shadow: 0px 5px 0px 0px rgba(224, 126, 0, 1);
box-shadow: 0px 5px 0px 0px rgba(224, 126, 0, 1);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-shadow: 1px 1px 0px #cb8700;
padding: 10px 20px;
display: inline-block;
font-family: Lucida Grande;
font-size: 14px;
color: #ffffff;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.button:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f500), color-stop(100%,#f5b000));
background: -moz-linear-gradient(center top, #f5f500 0%, #f5b000 100%);
-webkit-box-shadow: 0px 3px 0px 0px rgba(224, 126, 0, 1);
-moz-box-shadow: 0px 3px 0px 0px rgba(224, 126, 0, 1);
box-shadow: 0px 3px 0px 0px rgba(224, 126, 0, 1);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
transform: translateY(2px);
}
.button:active {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f500), color-stop(100%,#d69900));
background: -moz-linear-gradient(center top, #f5f500 0%, #d69900 100%);
-webkit-box-shadow: 0px -5px 15px #ff7a05 inset, 0px 0px 0px 1px #deb200, 0px 0px 0px 1px #ffffff inset;
-moz-box-shadow: 0px -5px 15px #ff7a05 inset, 0px 0px 0px 1px #deb200, 0px 0px 0px 1px #ffffff inset;
box-shadow: 0px -5px 15px #ff7a05 inset, 0px 0px 0px 1px #deb200, 0px 0px 0px 1px #ffffff inset;
}
</style>
</head>
<body>
<a class="button" href="#">Simple button</a>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.