Bootstrap 超酷3D按钮设计效果

PetitQ 按钮图标 2019-3-10 3.04K 0 0

这是一款基于 Bootstrap 的超酷 3D 按钮设计效果。该 3D 按钮通过在按钮底部设置阴影效果来形成 3D 效果，并且在鼠标滑过按钮时，按钮有下凹的动画，效果非常的酷。

HTML 结构

这个 3D 按钮效果采用 Bootstrap 的按钮样式，你可以设置各种类型的 boostrap 按钮。例如下面是一组尺寸为 sm 的小按钮。

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

```
<div class="row pad-15">
```
```
    <div class="col-sm-3">
```

        <a href="#" class="btn btn-sm blue">3D button</a>

```
    </div>
```
```
 
```
```
    <div class="col-sm-3">
```

        <a href="#" class="btn btn-sm light-brown">3D button</a>

```
    </div>
```
```
 
```
```
    <div class="col-sm-3">
```

        <a href="#" class="btn btn-sm light-green">3D button</a>

```
    </div>
```
```
 
```
```
    <div class="col-sm-3">
```

        <a href="#" class="btn btn-sm light-orange">3D button</a>

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

CSS 样式

首先为按钮添加一些通用样式：

```
.btn:hover, .btn:focus{
```
```
    outline: none;
```
```
    color:#fff;
```
```
}
```
```
.btn{
```
```
    text-transform: capitalize;
```
```
    color:#fff;
```
```
    padding: 14px 20px;
```
```
}
```
```
.btn:hover{
```
```
    color:#fff;
```
```
}
```
```
.btn-sm{
```
```
    padding: 11px 16px;
```
```
    border-radius: 5px;
```
```
}
```
```
.btn-lg{
```
```
    font-size: 15px;
```
```
}
```
```
.button-left > i{
```
```
    margin-left: 7px;
```
```
}
```
```
.button-right > i{
```
```
    margin-right: 7px;
```
```
}
```

class 类 blue、light-brown、light-green 和 light-orange 为几种预定义的按钮颜色。在按钮的底部，通过 box-shadow 首先为按钮添加阴影效果。按钮的定位方式为相对定位，并为所有的 CSS 动画设置 0.2 秒的 ease-in-out 效果过渡动画。

```
.blue,
```
```
.light-brown,
```
```
.light-green,
```
```
.light-orange{
```
```
    background: #0088cc;
```
```
    box-shadow:0 4px 0 #006394;
```
```
    transition:all 0.2s ease-in-out 0s;
```
```
    position: relative;
```
```
    top:0;
```
```
}
```
```
.light-brown{
```
```
    background: #cec2ab;
```
```
    box-shadow: 0 4px 0 #b9a888;
```
```
}
```
```
.light-green{
```
```
    background: #75d69c;
```
```
    box-shadow:0 4px 0 #4ac97d;
```
```
    border-radius: 25px;
```
```
}
```
```
.light-orange{
```
```
    background: #f79468;
```
```
    box-shadow: 0 4px 0 #f46e33;
```
```
}                 
```
```
 
```

在鼠标滑过按钮的时候，按钮的背景颜色和阴影颜色被修改。

```
.blue:hover,
```
```
.light-brown:hover,
```
```
.light-green:hover,
```
```
.light-orange:hover{
```
```
    top:2px;
```
```
    box-shadow:0 2px 0 #006394;
```
```
}
```
```
.light-brown:hover{
```
```
    box-shadow: 0 2px 0 #b9a888;
```
```
}
```
```
.light-green:hover{
```
```
    box-shadow:0 2px 0 #4ac97d;
```
```
}
```
```
.light-orange:hover{
```
```
    box-shadow: 0 2px 0 #f46e33;
```
```
}
```

Bootstrap 超酷 3D 按钮设计效果

已有 761 人购买

永久更新：
演示数据：
提取码：bimx

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

按钮图标

Bootstrap 超酷3D按钮设计效果

HTML 结构

CSS 样式

Bootstrap 超酷 3D 按钮设计效果

相关文章

jQuery+css3单选框复选框美化效果

基于SVG的jQuery旋转按钮插件

Switch - iOS样式滑动开关按钮JS插件

发表回复取消回复

热销模板

按钮图标

HTML 结构

CSS 样式

Bootstrap 超酷 3D 按钮设计效果

相关文章

发表回复 取消回复

热销模板

发表回复取消回复