纯CSS3带动画特效的精美3D大按钮

PetitQ 按钮图标 2019-1-21 1.74K 0 1

这是一组非常时尚的纯 CSS3 带动画特效的精美 3D 大按钮。这组按钮共 10 种样式，这些按钮被制作为立体效果，按钮的左侧或右侧分别带有不同边框样式的图标，并且这些边框在鼠标滑过时还有一些动画效果。

HTML 结构

所有的按钮都使用类似的 HTML 结构：使用<a>元素来包裹一组<span>元素。这些<span>元素用于制作按钮上图标的边框。例如第二种效果的 HTML 结构如下：

也想出现在这里？联系我们吧

```
<a href="#" class="btn left">
```

  <span class="left icon icon-heart"><span class="arrow-left"></span></span>

  <span class="right title">Favorite This!</span>

```
</a>
```

CSS 样式

按钮的样式通过<a>元素来渲染，它设置了固定的高度和圆角。宽度由内容来决定。

```
a {
```
```
    text-decoration: none;
```
```
    color: #fff;
```
```
    margin: 0 10px;
```
```
}
```
```
.btn {
```
```
    box-sizing: border-box;
```
```
    -moz-box-sizing: border-box;
```
```
    -webkit-box-sizing: border-box;
```
```
    position: relative;
```
```
    display: inline-block;
```
```
    overflow: hidden;
```
```
    height: 53px;
```
```
    border-radius: 6px;
```
```
    -moz-border-radius: 6px;
```
```
    -webkit-border-radius: 6px;
```
```
    line-height: 30px;
```
```
    font-size: 16px;
```
```
    font-weight: bold;
```
```
    text-shadow: 0px 1px 1px #888;
```
```
}
```

3D 按钮效果通过 box-shadow 来设置：

```
.btn span.icon {
```
```
    font-size: 23px;
```
```
    background-color: #00967f;
```

    -webkit-box-shadow: 0 3px 0 0 #007261;

```
    box-shadow: 0 3px 0 0 #007261;
```
```
    text-shadow: 0px 1px 1px #888;
```
```
}
```
```
.btn span.title {
```

    -webkit-box-shadow: 0 3px 0 0 #00ae94;

```
    box-shadow: 0 3px 0 0 #00ae94;
```
```
    background-color: #00cdae;
```
```
}
```

另外通过移动 span.arrow-left 或 span.arrow-right 来制作鼠标滑过时的动画效果。

```
.btn.left span.arrow-left {
```
```
    right: 0;
```

    -webkit-box-shadow: 10px 0 0 0 #00cdae, 10px 3px 0 0 #00ae94;

    box-shadow: 10px 0 0 0 #00cdae, 10px 3px 0 0 #00ae94;

```
    border-right: 10px solid #00cdae;
```
```
}
```
```
.btn.right span.arrow-left {
```
```
    right: 0;
```

    -webkit-box-shadow: 10px 0 0 0 #00967f, 10px 3px 0 0 #007261;

    box-shadow: 10px 0 0 0 #00967f, 10px 3px 0 0 #007261;

```
    border-right: 10px solid #00967f;
```
```
}
```
```
.btn.left span.arrow-right {
```
```
    left: 0;
```

    -webkit-box-shadow: -10px 0 0 0 #00967f, -10px 3px 0 0 #007261;

    box-shadow: -10px 0 0 0 #00967f, -10px 3px 0 0 #007261;

```
    border-left: 10px solid #00967f;
```
```
}
```
```
.btn.right span.arrow-right {
```
```
    left: 0;
```

    -webkit-box-shadow: -10px 0 0 0 #00cdae, -10px 3px 0 0 #00ae94;

    box-shadow: -10px 0 0 0 #00cdae, -10px 3px 0 0 #00ae94;

```
    border-left: 10px solid #00cdae;
```
```
}
```
```
.btn:hover span.arrow-left {
```
```
    right: 10px;
```
```
}
```
```
.btn:hover span.arrow-right {
```
```
    left: 10px;
```
```
}
```

纯 CSS3 带动画特效的精美 3D 大按钮

已有 434 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

按钮图标

纯CSS3带动画特效的精美3D大按钮

HTML 结构

CSS 样式

纯 CSS3 带动画特效的精美 3D 大按钮

相关文章

多种纯css3按钮样式

Quantum Paper 风格按钮变形动画特效

css3 制作精美按钮hover动画效果

发表回复取消回复

热销模板

按钮图标

HTML 结构

CSS 样式

纯 CSS3 带动画特效的精美 3D 大按钮

相关文章

发表回复 取消回复

热销模板

发表回复取消回复