jWeaver jWeaver - 1 year ago 86
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>

And CSS is

.content {
width: 120px;
overflow: hidden;
color: #f5f5f5;
background: #2d3f51;

.content img {
margin: 5px;
float: left;


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


Answer Source


<p class="mybutton">Google</p>


.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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download