使用CSS属性怎么实现按钮悬停边框和背景动画集合-创新互联
使用CSS 属性怎么实现按钮悬停边框和背景动画集合？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
10年积累的网站制作、
成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先
制作网站后付款的网站建设流程，更有
润州免费网站建设让你可以放心的选择与我们合作。
心属性
opacity: .999 使元素产生一个层叠上下文，这样按钮6和8的动画就不会被背景遮盖住了
left/top: -1px 使伪元素与按钮的位置重合，原因在下方
transition-delay 横向与纵向边框动画产生细微的延时效果
z-index: -1 防止动画产生的颜色块盖住按钮的文字
设置了left/top/right/bottom的absolute元素，是相对于父元素的padding-box进行定位的，所以这里伪元素要移动一个边框的距离，才能与按钮的位置重合，否则会出现下面的效果：
可以看到，绿色边框和灰色边框有1px的距离
*, *:before, *:after {
transition: all 0.3s;
}
section {
position: relative;
padding: 5px 0 5px;
text-align: center;
}
.btn {
position: relative;
display: inline-block;
line-height: 35px;
margin: 8px;
padding: 0 15px;
font-size: 15px;
border-radius: 3px;
opacity: .999;
cursor: pointer;
}
.btn-border-o {
background-color: transparent;
border: 1px solid #d0d0d0;
color: #B8B8B8;
}
.btn-border-o:before, .btn-border-o:after {
content: '';
position: absolute;
border-style: solid;
border-radius: 3px;
box-sizing: content-box;
}
.btn-border-o:before {
left: 0;
top: -1px;
width: 0;
height: 100%;
border-width: 1px 0 1px 0;
transition-delay: 0.05s;
}
.btn-border-o:after {
top: 0;
left: -1px;
width: 100%;
height: 0;
border-width: 0 1px 0 1px;
}
.btn-border-o:hover:before {
width: 100%;
}
.btn-border-o:hover:after {
height: 100%;
}
.btn-border-o.btn-green:before, .btn-border-o.btn-green:after {
border-color: #2ecc71;
}
.btn-border-o.btn-green:hover {
color: #2ecc71;
}
.btn-border {
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
color: #a6a6a6;
}
.btn-border:before, .btn-border:after {
position: absolute;
content: '';
border-style: solid;
border-radius: 3px;
box-sizing: content-box;
}
.btn-border:before {
top: -1px;
left: 0;
width: 0;
height: 100%;
border-width: 1px 0 1px 0;
transition-delay: 0.05s;
}
.btn-border:after {
top: 0;
left: -1px;
width: 100%;
height: 0;
border-width: 0 1px 0 1px;
}
.btn-border:hover {
background-color: transparent;
}
.btn-border:hover:before {
width: 100%;
}
.btn-border:hover:after {
height: 100%;
}
.btn-border.btn-blue:before, .btn-border.btn-blue:after {
border-color: #3498db;
}
.btn-border.btn-blue:hover {
color: #3498db;
}
.btn-border-rev-o {
background-color: transparent;
border: 1px solid #d0d0d0;
color: #B8B8B8;
}
.btn-border-rev-o:before, .btn-border-rev-o:after {
content: '';
position: absolute;
border-style: solid;
border-radius: 3px;
box-sizing: content-box;
}
.btn-border-rev-o:before {
top: -1px;
right: 0;
width: 0;
height: 100%;
border-width: 1px 0 1px 0;
transition-delay: 0.05s;
}
.btn-border-rev-o:after {
left: -1px;
bottom: 0;
width: 100%;
height: 0;
border-width: 0 1px 0 1px;
}
.btn-border-rev-o:hover:before {
width: 100%;
}
.btn-border-rev-o:hover:after {
height: 100%;
}
.btn-border-rev-o.btn-purple:before, .btn-border-rev-o.btn-purple:after {
border-color: #9b59b6;
}
.btn-border-rev-o.btn-purple:hover {
color: #9b59b6;
}
.btn-border-rev {
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
color: #a6a6a6;
}
.btn-border-rev:before, .btn-border-rev:after {
content: '';
position: absolute;
border-style: solid;
border-radius: 3px;
box-sizing: content-box;
}
.btn-border-rev:before {
top: -1px;
right: 0;
width: 0;
height: 100%;
border-width: 1px 0 1px 0;
}
.btn-border-rev:after {
bottom: 0;
left: -1px;
width: 100%;
height: 0;
border-width: 0 1px 0 1px;
transition-delay: 0.05s;
}
.btn-border-rev:hover {
background-color: transparent;
}
.btn-border-rev:hover:before {
width: 100%;
}
.btn-border-rev:hover:after {
height: 100%;
}
.btn-border-rev.btn-navy:before, .btn-border-rev.btn-navy:after {
border-color: #34495e;
}
.btn-border-rev.btn-navy:hover {
color: #34495e;
}
.btn-fill-vert-o {
background-color: transparent;
border: 1px solid #d0d0d0;
color: #B8B8B8;
overflow: hidden;
}
.btn-fill-vert-o:before, .btn-fill-vert-o:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 0;
opacity: 0;
z-index: -1;
}
.btn-fill-vert-o:before {
top: 50%;
}
.btn-fill-vert-o:after {
bottom: 50%;
}
.btn-fill-vert-o:hover {
color: #fff;
}
.btn-fill-vert-o:hover:before, .btn-fill-vert-o:hover:after {
height: 50%;
opacity: 1;
}
.btn-fill-vert-o.btn-orange:before, .btn-fill-vert-o.btn-orange:after {
background-color: #e67e22;
}
.btn-fill-vert-o.btn-orange:hover {
border-color: #e67e22;
}
.btn-fill-vert {
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
color: #a6a6a6;
overflow: hidden;
}
.btn-fill-vert:before, .btn-fill-vert:after {
content: '';
position: absolute;
width: 100%;
height: 0;
opacity: 0;
left: 0;
z-index: -1;
}
.btn-fill-vert:before {
top: 50%;
}
.btn-fill-vert:after {
bottom: 50%;
}
.btn-fill-vert:hover {
color: #fff;
}
.btn-fill-vert:hover:before, .btn-fill-vert:hover:after {
height: 50%;
opacity: 1;
}
.btn-fill-vert.btn-red:before, .btn-fill-vert.btn-red:after {
background-color: #e74c3c;
}
.btn-fill-vert.btn-red:hover {
border-color: #e74c3c;
}
.btn-fill-horz-o {
background-color: transparent;
border: 1px solid #d0d0d0;
color: #B8B8B8;
overflow: hidden;
}
.btn-fill-horz-o:before, .btn-fill-horz-o:after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 100%;
opacity: 0;
z-index: -1;
}
.btn-fill-horz-o:before {
left: 50%;
}
.btn-fill-horz-o:after {
right: 50%;
}
.btn-fill-horz-o:hover {
color: #fff;
}
.btn-fill-horz-o:hover:before, .btn-fill-horz-o:hover:after {
width: 50%;
opacity: 1;
}
.btn-fill-horz-o.btn-green:before, .btn-fill-horz-o.btn-green:after {
background-color: #2ecc71;
}
.btn-fill-horz-o.btn-green:hover {
border-color: #2ecc71;
}
.btn-fill-horz {
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
color: #a6a6a6;
overflow: hidden;
}
.btn-fill-horz:before, .btn-fill-horz:after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 100%;
opacity: 0;
z-index: -1;
}
.btn-fill-horz:before {
left: 50%;
}
.btn-fill-horz:after {
right: 50%;
}
.btn-fill-horz:hover {
color: #fff;
}
.btn-fill-horz:hover:before, .btn-fill-horz:hover:after {
width: 50%;
opacity: 1;
}
.btn-fill-horz.btn-blue:before, .btn-fill-horz.btn-blue:after {
background-color: #3498db;
}
.btn-fill-horz.btn-blue:hover {
border-color: #3498db;
}
看完上述内容，你们掌握使用CSS 属性怎么实现按钮悬停边框和背景动画集合的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
网站名称：使用CSS属性怎么实现按钮悬停边框和背景动画集合-创新互联
文章地址：
http://chengdu.cdxwcx.cn/article/ecegc.html
