New - Pastie

Language:

## mark a section (Learn more)

<!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>  <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>