|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Pulsanti css3 e box-shadow</title> <style type="text/css"> .menu{ width:172px; height:48px; margin:10% auto; position:relative; } .button_one{ display:block; width:150px; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; text-align:center; text-decoration:none; cursor:pointer; padding:10px; background:#99ca00; color:#617d0f; border-radius:8px; border:1px solid #82ac00; border-bottom:none; -moz-transition: background 0.2s ease-in-out 0s; box-shadow: 0 1.2em 0.5em rgba(255, 255, 255, 0.40) inset, 0 0.2em 2px #8ab600, 0 0.4em 0px #536e00, 0 0.6em 4px rgba(0, 0, 0, 0.2); } .button_one:hover{ background:#a6db00; -moz-transition: background 0.2s ease-in-out 0s; } .button_one.glass:after{ content:""; position:absolute; width:160px; height:20px; top:1px; left:6px; -webkit-border-radius:.5em .5em 1em 1em / .5em .5em 2em 2em; -moz-border-radius:.5em .5em 1em 1em / .5em .5em 2em 2em; background-image:-webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); background-image:-moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) ); background-image:gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); opacity:1; } </style> </head> <body> <div class="menu"> <table> <tr> <td> <a href="#" class="button_one glass">BUTTON ONE</a><br /> </td> <td> <a href="#" class="button_one glass">BUTTON ONE</a> <br /></td> <td> <a href="#" class="button_one glass">BUTTON ONE</a><br /></td></tr></table> </div> </body> </html> |