how to get text beside image button using CSS - html

Question

I was trying to create a button using CSS. The html code looks like
<div class="content">
<img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ width="20" height="20">
<span class="fon">Google</span>
</div>
And CSS is
.content {
width: 120px;
overflow: hidden;
color: #f5f5f5;
background: #2d3f51;
}
.content img {
margin: 5px;
float: left;
}
.fon{
position:relative;top:5px;
}
I'm getting output as expected, but I wanted to reduce repetitive html code and move them to CSS, so that I just need to write code similar to below code and should show same output :
<span class="mybutton">Google</span>
Here is my JSFiddle
http://jsfiddle.net/WW4N6/678/

Answer 1

html
<p class="mybutton">Google</p>
css
.mybutton {
background: #2d3f51;
color: #f5f5f5;
display: flex;
align-items: center;
height: 30px;
width: 100px;
padding: 0 5px;
}
.mybutton:before {
content: '';
background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png');
background-size: cover;
width: 20px;
height: 20px;
display: inline-block
}
JSFiddle: http://jsfiddle.net/WW4N6/681/

Answer 2

css
.mybutton {
width: 90px;
height: 30px;
overflow: hidden;
color: #f5f5f5;
background: #2d3f51;
background-image: url(http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png);
background-size: 20px, 20px;
background-repeat: no-repeat;
background-position: 5px;
padding-top: 10px;
padding-left: 30px;
}
jsFiddle link
http://jsfiddle.net/joshchurning/9sysby5f/

Answer 3

you could use css's background property for your button:
.mybutton {
....
background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png') no-repeat center center #2d3f51
....
}

Answer 4

If you want to get rid of the HTML code (the width and length of img, I'm assuming), you could just put the width and height in your .content img CSS class
.content img {
margin: 5px;
float: left;
width: 20px;
height: 20px;
}