Styling a content: url() - html

Question

I am using a button I found on the internet but I cannot manage to work this out:
The button has a hover effect that brings down an image, the only way I can get it to show an image instead of text is with the attribute.
.icon-cart:before {
content: url("http://twiki.org/p/pub/TWiki/TWikiDocGraphics/facebook.gif");
}
Is there a way to either style this image or replace it with a standard img or div?
Here is the JS-Fiddle

Answer 1

Check this working 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%);
}