您现在的位置是：网站首页 > 心得笔记
鼠标悬停按钮动画
简介鼠标放上去之后之后， 上下分别从左右出现横线，离开自动消失
效果：
html：
<div class="button-border"><button class="button">Submit</button></div> <div class="button-border"><button class="button">Submit</button></div> <div class="button-border"><button class="button">Submit</button></div>
css：
.button {
background-color:#75daf3;
border:none;
color:#ffffff;
outline:none;
padding:12px 40px 10px;
position:relative;
left:50px;
top:50px;
margin: 10px;
}
.button:before,.button:after {
border:0 solid transparent;
transition:all 0.25s;
content:'';
height:24px;
position:absolute;
width:0px;
}
.button:before {
border-top:2px solid #c47135;
left:0px;
top:-5px;
}
.button:after {
border-bottom:2px solid #c47135;
bottom:-5px;
right:0px;
}
.button:hover {
background-color:#58b6d3;
}
.button:hover:before,.button:hover:after {
height:100%;
width:100%;
}上一篇：关系型数据库中的外键