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 animate top % after a delay?

    How to render a hierarchy tree in HTML5/CSS?

    How to rotate top-border around the circle?

    Hide all, show a class with css

    How to add-class and focus the children on keydown function

    How to put 3 of these tables into the correct spot with CSS

    How to tell what in CSS files that is not used? [duplicate]

    How to get a label under an underlined word in css? [closed]

    How can I center using percentages?

    How to setup a ASP template

    How to have different transistions for background-image and text in a div using CSS

    Showing play button and time on each image

    How to add a broccoli plugin to ember-cli app with live-reload?

    how to make form input in middle

    How to set a css style to the last item of CListView?

    How do I combine this 2 sets of coding together to form a mega drop down nav

    How to Add sub menu to dropdown menu in Blogger

    How to customize bootstrap css when using bootstrap-sass [closed]

    Google fonts and twitter bootstrap 3: where should I load the fonts, and how to use it in css file?

    How can I align the checkboxes in a form when using table display with CSS?

    How can I fix this Bootstrap layout issue?

    How can I set -webkit-mask-box-image through javascript?

    How to set each type of page transition to a specific page? (css animations)

    How to use absolute position relative to parent element

    How can I select every other element that does not have a specific class?

    How to make a vertically extendable DIV box from this image?

    Are there any browser development tools that show you what level of the DOM an element is, so I know how to select it with CSS?

    How can I rotate(or change) background image using CSS and Javascript

    How to create different shape in css?

    How to position an absolute div next to an element in a scrollable section, but outside the section