jWeaver jWeaver - 4 months ago 9
HTML Question

how to get text beside image button using CSS

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

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/