网页按钮css

来源：互联网发布：mac版千牛编辑：程序博客网时间：2024/05/22 11:32

<pre name="code" class="css">*{margin:0;padding:0;}body{background:#999999;}.box{width:800px;height:280px;margin:50px auto;}.box .link{width:205px;height:280px;float:left;margin:0 20px;}.link .icon{display:inline-table;width:100%;height:190px;transition:0.2s ease-out;-moz-transition:0.2s ease-out;-webkit-transition:0.2s ease-out;-o-transition:0.2s ease-out;}.link-miss .icon{background-image: url(1.png);background-repeat: no-repeat;background-position: center center;}.link-play .icon{background:url(3.png) no-repeat center center;}.link-touch .icon{background:url(2.png) no-repeat center center;}.link .icon:hover{transform:rotate(360deg) scale(1.3);}.button{display:block;width:180px;height:50px;line-height:50px;text-decoration:none;color:#2dcb70;font-family:Arial;font-weight:bolder;border:2px solid rgba(255,255,255,0.3);padding-left:20px;margin:0 auto;position:relative;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;background:url(4.png) no-repeat 130px center;transition:0.4s ease;-moz-transition:0.4s ease;-webkit-transition:0.4s ease;-o-transition:0.4s easet;}.button:hover{border:2px solid rgba(255,255,255,1);background-position:140px center;}.button .line{display:block;position:absolute;background:none;transition:0.4s ease;-moz-transition:0.4s ease;-webkit-transition:0.4s ease;-o-transition:0.4s ease;}.button:hover .line{background:#FFF;}.button .line-top{height:2px;width:0px;left:-110%;top:-2px;}.button:hover .line-top{width:180px;left:-2px;}.button .line-right{height:0px;width:2px;top:-110%;right:-2px;}.button:hover .line-right{height:50px;top:-2px;}.button .line-left{height:0px;width:2px;left:-2px;bottom:-110%;}.button:hover .line-left{height:50px;bottom:-2px;}.button .line-bottom{height:2px;width:0px;right:-110%;bottom:-2px;}.button:hover .line-bottom{width:180px;right:-2px;}

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>幽灵按钮</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body><div class="box"><div class="link link-miss"><span class="icon"></span><a href="#" class="button" data="My mission is clear"><span class="line line-top"></span><span class="line line-right"></span><span class="line line-bottom"></span><span class="line line-left"></span>MISSION</a></div><div class="link link-play"><span class="icon"></span><a href="#" class="button" data="My play"><span class="line line-top"></span><span class="line line-right"></span><span class="line line-bottom"></span><span class="line line-left"></span>PLAYER</a></div><div class="link link-touch"><span class="icon"></span><a href="#" class="button" data="My touch"><span class="line line-top"></span><span class="line line-right"></span><span class="line line-bottom"></span><span class="line line-left"></span>MING</a></div></div><table width="100%" border="0" cellspacing="0" cellpadding="2" bgcolor="#CCCCCC"> <tr> <td> <p align="center"><font size="8">FREE FREE FREE</font></p></td> </tr></table></body></html>

0 0