网页按钮css

最新推荐文章于 2024-04-20 19:40:16 发布

FreeMing-imduingui0

最新推荐文章于 2024-04-20 19:40:16 发布

阅读量453

点赞数

分类专栏： jsp 我的大学文章标签： css class utf-8

本文链接：https://blog.csdn.net/qq_20881087/article/details/41558671

版权

我的大学同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

jsp

3 篇文章 0 订阅

订阅专栏

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

FreeMing-imduingui0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页按钮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-ta
复制链接

扫一扫