按钮悬停边框和背景动画集合

栏目: Html · 发布时间: 5年前

核心属性

opacity: .999 使元素产生一个层叠上下文，这样按钮6和8的动画就不会被背景遮盖住了

left/top: -1px 使伪元素与按钮的位置重合，原因在下方

transition-delay 横向与纵向边框动画产生细微的延时效果

z-index: -1 防止动画产生的颜色块盖住按钮的文字

设置了left/top/right/bottom的absolute元素，是相对于父元素的padding-box进行定位的，所以这里伪元素要移动一个边框的距离，才能与按钮的位置重合，否则会出现下面的效果：

按钮悬停边框和背景动画集合

可以看到，绿色边框和灰色边框有1px的距离

```
<div class="main-container">
```
```
<section>
```

<button class="btn btn-green btn-border-o">按钮一</button>

<button class="btn btn-blue btn-border">按钮二</button>

<button class="btn btn-purple btn-border-rev-o">按钮三</button>

<button class="btn btn-navy btn-border-rev">按钮四</button>

```
</section>
```
```
<section>
```

<button class="btn btn-orange btn-fill-vert-o">按钮五</button>

<button class="btn btn-red btn-fill-vert">按钮六</button>

<button class="btn btn-green btn-fill-horz-o">按钮七</button>

<button class="btn btn-blue btn-fill-horz">按钮八</button>

```
</section>
```
```
</div>
```

```
*, *: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;
```
```
}
```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

About Face 3 交互设计精髓

Alan Cooper、Robert Reimann、David Cronin / 刘松涛 / 电子工业出版社 / 2008-11 / 72.00元

本书是一本数字产品和系统的交互设计指南，全面系统地讲述了交互设计过程、原理和方法，涉及的产品和系统有个人电脑上的个人和商务软件、Web应用、手持设备、信息亭、数字医疗系统、数字工业系统等。运用本书的交互设计过程和方法，有助于了解使用者和产品之间的交互行为，进而更好地设计出更具吸引力和更具市场竞争力的产品。全书分成3篇：第1篇描述了“目标导向设计”，详细讨论了用户和设计的过程及思想；第2篇讲......一起来看看《About Face 3 交互设计精髓》这本书的介绍吧!

码农工具

按钮悬停边框和背景动画集合

核心属性

About Face 3 交互设计精髓

在线进制转换器

HTML 编码/解码

Markdown 在线编辑器