how to get text beside image button using CSS


Tags: html,css

Problem :

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/



Solution :

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/


    CSS Howto..

    How To create slider/toggle to change font size on screen with HTML CSS JS [closed]

    How do I make a nested
    expand to its contents?

    How do nested vertical margin collapses work?

    How to code a scrolling frame in css

    How to apply @media for css attribute that are set via jquery

    How to select a group of elements after every nth-element in CSS?

    How to make a td element not wrap text inside a table?

    How to eliminate the overlap border using CSS only

    How can i improve my javascript? codepen included

    CSS visited links- how to recognize visited links which visited by clicking through my app?

    How to create a triangle in CSS3 using border-radius

    How to return a “text” in css less?

    How to get border width in jQuery/javascript

    How to wrap a DIV around a DIV with CSS

    I have the CSS & JS, how do I convert that to erb for my Rails app?

    how to set shadow for round image(css)

    how do i prevent respond.js reading my retina display media query?

    How can I align a logo AND a heading to the centre of a page?

    how to get a grid of different sizes using css and javascipt

    How to change css properties depending on parent, but with the same class name [closed]

    How to display an image in the right upper corner of an input box

    How to switch fixed elements when scrolling down the page

    how to style this via css in Bootstrap

    How to align buttons properly in css/asp.net?

    How can I make images fit into a 200 pixel square box using CSS?

    How to remove string that dosn't have an html tag using CSS

    How to make groups of divs the same width using only CSS?

    How to fill HTML5 input[type=range] on the left side of the thumb with CSS only?

    How do the Sass variables get assigned to CSS selectors with Foundation 4?

    How to find absolute path to @font-face fonts with Firebug?