CSS3鼠标悬浮动画按钮效果
分类：实例代码
CSS3鼠标悬浮动画按钮效果属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了鼠标悬浮实现动画按钮的功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
*, *:after, *:before {
box-sizing: border-box;
}
.box {
position: relative;
margin: 30px auto;
display: block;
text-align: center;
}
button {
border: none;
color: inherit;
background: none;
outline: none;
-webkit-appearance: none;
cursor: pointer;
}
.button {
display: inline-block;
position: relative;
z-index: 1;
min-width: 150px;
max-width: 250px;
margin: 1em;
padding: 1em 2em;
overflow: hidden;
vertical-align: middle;
-webkit-backface-visibility: hidden;
transition: color 0.3s ease-out;
}
.button:before,.button:after {
content: '';
position: absolute;
z-index: -1;
border-radius: inherit;
transition: all 0.3s ease-out;
}
.button span {
vertical-align: middle;
}
.UpDown {
color: #fff;
border-radius: 4px;
}
.UpDown:hover {
color: #7986cb;
}
.UpDown:after {
background: #37474f;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
}
.UpDown:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #7986cb;
transform: translate3d(-100%,100%,0);
}
.UpDown:hover:before {
transform: translate3d(0,0,0);
}
.OutIn {
color: #fff;
border-radius: 4px;
}
.OutIn:hover {
color: #3f51b5;
}
.OutIn:after, .OutIn:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
}
.OutIn:before {
border: 2px solid #3f51b5;
background-color: #fff;
opacity: 0;
-transform: scale3d(1.2,1.2,1);
}
.OutIn:hover:before {
opacity: 1;
transform: scale3d(1,1,1);
}
.OutIn:after {
background-color: #3f51b5;
transform: scale3d(1,1,1);
}
.OutIn:hover:after {
opacity: 0;
transform: scale3d(0.5,0.5,1);
}
</style>
</head>
<body>
<div class="box">
<div class="box">
<button class="button UpDown">
<span>UpDown</span>
</button>
<button class="button OutIn">
<span>OutIn</span>
</button>
</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，更多内容可以参阅相关阅读。
相关阅读:
（1）.box-sizing参阅CSS3 box-sizing一章节。
（2）.appearance参阅css3 appearance一章节。
（3）.backface-visibility参阅CSS3 backface-visibility一章节。
（4）.transition参阅css transition一章节。
（5）.border-radius参阅CSS3 border-radius一章节。
CSS3鼠标悬浮动画按钮效果，这样的场景在实际项目中还是用的比较多的，关于CSS3鼠标悬浮动画按钮效果就介绍到这了。