Css 显示图标按钮-引导3

如何在TB3中悬停的按钮内创建一个显示图标。我尝试使用CSS转换和position属性来模拟这种行为。但我基本上需要的是有一个单独的图标和按钮的背景色。这就是我现在正在做的

HTML标记

<button class="btn btn-dark icon-revealed">
    <span class="glyphicon glyphicon-cloud-download"></span>
    Download
</button>

我想要实现的目标

.btn.icon-revealed > span {
    left: -30px;
    width: 0;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
}
.btn.icon-revealed:hover > span {
    width: 20%;
    -webkit-transform: translate(2em,0);
    -moz-transform: translate(2em,0);
    -o-transform: translate(2em,0);
    -ms-transform: translate(2em,0);
}

---

请注意，在悬停状态下图标和按钮的背景色已更改。我不能那样做。如何在TB3中实现这一点？

您可以使用具有

线性渐变的多个背景创建该效果。注释中的代码解释


.btn.icon-exposed{
边距：10px；/*为SO代码段添加，不需要*/
宽度：115px；/*增加了固定宽度以避免跳转*/
}
.btn.icon-discovered>span{
左：-40px；
宽度：0；
-webkit过渡：所有.5s轻松输入输出；
-moz过渡：所有.5s轻松输入输出；
-o型过渡：所有。5s易进易出；
-ms过渡：所有.5s易进易出；
}
.btn.图标显示：悬停>跨距{
宽度：20%；
-webkit转换：翻译（2.5em，0）；
-moz变换：平移（2.5em，0）；
-o变换：平移（2.5em，0）；
-ms变换：平移（2.5em，0）；
}
/*添加代码*/
.btn.icon-exposed{
背景#53777A；
颜色：#fff；
}
.btn.图标显示：悬停{
背景：线性梯度（向右，#4B6B6E0%，#4B6B6E30%，#53777A 30%）；
/*开始颜色--^，在30%处结束--^，^--开始第二种颜色*/
颜色：#fff；
}
.btn.图标显示：hover.text{
左侧填充：5px；
}

下载
这里有另一种平滑过渡的方法


.btn暗{
边界：无；
字体家族：继承；
字体大小：继承；
颜色：#fff；
背景：无；
填充：15px 30px；
显示：内联块；
文本转换：大写；
字母间距：1px；
字号：500；
大纲：无；
位置：相对位置；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
过渡：均为0.3秒；
}
.btn黑暗：之后{
内容：''；
位置：绝对位置；
z指数：-1；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
过渡：均为0.3秒；
}
.btn图标{
背景：#4E7878；
颜色：#fff；
线高：20px；
字体大小：14px；
溢出：隐藏；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
背面可见性：隐藏；
}
.btn图标跨度{
显示：内联块；
宽度：100%；
身高：100%；
-webkit转换：所有0.3；
-webkit背面可见性：隐藏；
-moz转换：全部为0.3s；
-moz背面可见性：隐藏；
过渡：均为0.3秒；
背面可见性：隐藏；
}
.btn图标：之前{
背景：#4A6B6B；
位置：绝对位置；
身高：100%；
宽度：30%；
线高：2.5；
字体大小：150%；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
过渡：均为0.3秒；
}
.btn下载：悬停范围{
-webkit转换：translateX（25%）；
-moz变换：translateX（25%）；
-ms转化：translateX（25%）；
转化：translateX（25%）；
颜色：#fff；
}
.btn下载：下载前{
左-100%；
排名：0；
}
.btn下载：悬停：之前{
左：0%；
}
.图标显示：之前{
内容：“\e197”；
字体系列：“字形图标半身人”；
颜色：#fff；
}


下载