html - 样式化内容 : url()

Question

我正在使用在互联网上找到的按钮，但我无法解决这个问题:

该按钮具有悬停效果，可以显示图像，我可以让它显示图像而不是文本的唯一方法是使用该属性。

.icon-cart:before {
    content: url("http://twiki.org/p/pub/TWiki/TWikiDocGraphics/facebook.gif");
}

有没有办法为这张图片设置样式或用标准 img 或 div 替换它？

这是 JS-Fiddle

Answer 1

检查此工作 fiddle .

HTML

<button class="btn btn-5 btn-5a icon-cart"><span class='fbtext'>Facebook</span><img class='fbimage' src='http://twiki.org/p/pub/TWiki/TWikiDocGraphics/facebook.gif'/></button>

CSS

.btn {
    border: none;
    font-family: Arial;
    font-size: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
    padding: 25px 80px;
    display: inline-block;
    margin: 15px 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
/* Button 5 */
.btn-5 {
    background: #000;
    color: #fff;
  position:relative;
    height: 70px;
    min-width: 260px;
    line-height: 24px;
    font-size: 16px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.btn-5 .fbimage{
  position:absolute;
  left:50%;
  bottom:100%;
  margin-left:-8px;
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-5:hover .fbimage{
  bottom:50%;
  margin-bottom:-8px;
}
.btn-5:active {
    background: #0F0F0F;

}

.btn-5 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;
}
/* Button 5a */
.btn-5a:hover span {
    -webkit-transform: translateY(300%);
    -moz-transform: translateY(300%);
    -ms-transform: translateY(300%);
    transform: translateY(300%);
}