Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE html>
<head>
<title>An HTML5 CSS Rounded Button Code Snippet</title>
<style>
/* Begin HTML5 CSS Rounded Button */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
body {
font-family:verdana,arial,ms sans serif; font-size:90%; text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.myButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
background-color:#d1d1d1;
}
.myButton:active {
position:relative;
top:1px;
}
</style>
</head>
<body>

<h3>An HTML5 CSS Rounded Button Code Example:</h3>
<p>Roll your cursor over the button to see the hover button effect.</p>
<a href="http://snapbuilder.com" class="myButton" title="Visit SnapBuilder.com">My Button</a>

<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_125.html">HTML5 CSS Rounded Button</a> page. ]
</div>
</body>
</html>