Report abuse 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Circular Button</title>

<!--
	CSS3 Circular Button by rhamiro (Ramiro Croce)
	http://www.rhamiro.com.ar/826516513

	Released under a Creative Commons attribution license:
	http://creativecommons.org/licenses/by/3.0/
-->

<style type="text/css">

li { list-style-type:none;}
ul{display:block; margin: 20px auto; }

img{border:0px;}
a {outline:none;}

.button a{ font-family:Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: none; font-weight: bold; font-size:60px; line-height: 1; display: inline-block; height: 200px; width: 200px; letter-spacing:-5px; -moz-border-radius: 160px; -webkit-border-radius: 160px; -webkit-box-shadow: 0 1px 10px #999999; -moz-box-shadow: 0 1px 10px #999999; text-shadow: #F57158 0 1px 0; border: 1px solid #BA0C05; text-shadow:#999 0px -1px 5px; background: -moz-linear-gradient(center bottom, rgb(219,0,0) 25%, rgb(255,31,31) 65%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0.25, rgb(219,0,0)), color-stop(0.65, rgb(255,31,31)));}

.button a:hover {color:#F1F1F1; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.25, rgb(196,6,6)), color-stop(0.65, rgb(235,7,7))); background: -moz-linear-gradient(center bottom, rgb(196,6,6) 25%, rgb(235,7,7) 65%);}


.button a:active {color:#F1F1F1; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.25, rgb(235,7,7)), color-stop(0.65, rgb(196,6,6))); background: -moz-linear-gradient(center bottom, rgb(235,7,7) 25%, rgb(196,6,6) 65%);}

/* Shine layer*/

.shine { position:relative; display: inline-block; top:1px; left: 25px; -webkit-border-radius: 120px; -moz-border-radius: 120px; height: 150px; width: 150px; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0))) ; background: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%);}
  
/* The text*/
  
.text{ position:relative; top: 70px;}

</style>

</head>

<body>

<ul>
<li><div class="button"><a href="#"><div class="shine"><div class="text">STOP</div></div></a></div></li>
</ul>

</body>
</html>