这是一款基于bootstrap的带图标的按钮样式。这组按钮在bootstrap按钮的基础上，通过附加的HTML元素来构建小图标，并通过CSS3来制作鼠标hover动画效果。

使用方法

在页面中引入bootstrap.min.css和字体图标文件font-awesome.min.css。

HTML结构

制作一个按钮的基本HTML结构如下：

其中，red class用于控制按钮的颜色。元素用于制作按钮前的小图标。

CSS样式

用于美化按钮的CSS样式如下：

.btn{

color: #fff;

text-transform: uppercase;

border-radius: 0;

padding-left: 60px;

position: relative;

transform: translateZ(0px);

transition: all 0.5s ease 0s;

}

.btn:after{

content: "";

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: #fff;

z-index: -1;

transform: scaleX(0);

transform-origin: 100% 50% 0;

transition: all 0.5s ease-out 0s;

}

.btn:hover:after{

transform: scaleX(1);

transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);

}

.btn span{

width: 40px;

height: 100%;

line-height: 40px;

background: #fff;

position: absolute;

top: 0;

left: 0;

transition: all 0.3s linear 0s;

}

.btn span:after{

content: "";

display: block;

width: 10px;

height: 10px;

background: #fff;

margin: auto 0;

position: absolute;

top: 0;

right: -6px;

bottom: 0;

transform: rotate(45deg);

transition: all 0.3s linear 0s;

}

.btn.btn-sm{

padding-left: 40px;

}

.btn.btn-sm span{

width: 27px;

line-height: 27px;

}

.btn.btn-sm span:after{

width: 8px;

height: 8px;

right: -5px;

}

.btn.btn-xs{

padding-left: 30px;

}

.btn.btn-xs span{

width: 20px;

line-height: 20px;

}

.btn.btn-xs span:after{

width: 7px;

height: 7px;

right: -4px;

}

.btn.red{

border: 1px solid #fe6d6d;

background: #fe6d6d;

}

.btn.red:hover,

.btn.red span{

color: #fe6d6d;

}

.btn.red:hover span,

.btn.red:hover span:after{

background: #fe6d6d;

}

.btn.blue{

border: 1px solid #3bb4e5;

background: #3bb4e5;

}

.btn.blue:hover,

.btn.blue span{

color: #3bb4e5;

}

.btn.blue:hover span,

.btn.blue:hover span:after{

background: #3bb4e5;

}

.btn.orange{

border: 1px solid #ee955b;

background: #ee955b;

}

.btn.orange:hover,

.btn.orange span{

color: #ee955b;

}

.btn.orange:hover span,

.btn.orange:hover span:after{

background: #ee955b;

}

.btn.green{

border: 1px solid #79d799;

background: #79d799;

}

.btn.green:hover,

.btn.green span{

color: #79d799;

}

.btn.green:hover span,

.btn.green:hover span:after{

background: #79d799;

}

.btn:hover span{

color: #fff;

}

@media only screen and (max-width: 767px){

.btn{ margin-bottom: 20px; }

}