Button

Button

Rating: 4
Comments: 1

24 Jul 2011 02:58

A simple CSS rounded corner HTML 5 Button

<!DOCTYPE HTML>
<html>
<head>
<style>
.button a{background:#ffd018;float:left;display:block;width:150px;height:50px;margin-left:15px;border:#A3850D 1px solid;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-family:sans-serif,Helvetica;font-size:100%;color:#202020;line-height:50px;text-align:center;text-decoration:none;filter:alpha(opacity=75);opacity:0.75;}
.button a:hover{
    background:-moz-linear-gradient(top, #ffffff 0%, #ffc700 10%, #ffd018 50%, #ffd018 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff),color-stop(5%,#ffc700),color-stop(50%,#ffd018),color-stop(100%,#ffd018));
    background:-webkit-linear-gradient(top, #ffffff 0%,#ffc700 10%,#ffd018 50%,#ffd018 100%);
    background:-o-linear-gradient(top, #ffffff 0%,#ffc700 10%,#ffd018 50%,#ffd018 100%);
    background:-ms-linear-gradient(top, #ffffff 0%,#ffc700 10%,#ffd018 50%,#ffd018 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffd018',GradientType=0 );
    background:linear-gradient(top, #ffffff 0%,#ffc700 10%,#ffd018 50%,#ffd018 100%);
    text-shadow:#ffefb2 0 1px;
    filter:alpha(opacity=100);opacity:1.0;
    -webkit-box-shadow:0 25px 15px -25px rgba( 0,0,0,0.5 ); 
    -moz-box-shadow:0 25px 15px -25px rgba( 0,0,0,0.5 ); 
    box-shadow:0  25px 15px -25px rgba( 0,0,0,0.5 );}
</style>
</head>
 
<body>
<menu class="button"><a href="#" title="Enter Title Here">button</a></menu>
</body>
</html>