显示图标按钮-引导程序3 [英] Reveal Icon Button - Bootstrap 3
本文介绍了显示图标按钮-引导程序3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在TB3中将鼠标悬停在按钮内部创建显示图标.我试图使用CSS过渡和position属性来模仿这种行为.但是我本质上需要的是为图标和按钮设置单独的背景色.这就是我现在正在做的事情.
How to create a reveal icon inside button on hover in TB3. I tried to mimic this behavior using CSS transitions and position property. But I essentially need is to have a separate background color for icon and button. Here is what I am doing right now.
HTML标记
<button class="btn btn-dark icon-revealed">
<span class="glyphicon glyphicon-cloud-download"></span>
Download
</button>
CSS代码
.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中实现这一目标?
Notice the background color of icon and button changed on hover state. I could not able to do that. How can I achieve this in TB3?
推荐答案
这是平滑过渡的另一种方法.
Here's an alternative way that smooths out the transition.
.btn-dark {
border: none;
font-family: inherit;
font-size: inherit;
color: #fff;
background: none;
padding: 15px 30px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-dark:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-icon {
background: #4E7878;
color: #fff;
line-height: 20px;
font-size: 14px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-icon span {
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
.btn-icon:before {
background: #4A6B6B;
position: absolute;
height: 100%;
width: 30%;
line-height: 2.5;
font-size: 150%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-download:hover span {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
color: #fff;
}
.btn-download:before {
left: -100%;
top: 0;
}
.btn-download:hover:before {
left: 0%;
}
.icon-reveal:before {
content: "\e197";
font-family: 'Glyphicons Halflings';
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<button class="btn-dark btn-icon btn-download icon-reveal"><span> Download</span>
</button>
</div>
这篇关于显示图标按钮-引导程序3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文