button with image at left and text center aligned

1 Views

i am trying to make a button with an image in it and some text. i want the image to be align at left and the text to be fully centered. The text should be centered at the width of the whole button and not at the remaining width cause to the image.

i tried with span but with no success

Read More
<a href=#><button class="lightgray-btn rightbuttons"><span class="demoimage"><img class="btnimg" src="..." alt="" /></span><span class="demotext">"some text</span></button></a>

i also want to avoid the background-image:url because in mobile i am afraid that the text would be on the image

thank you

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. This will work for you.

    button {
  position: relative;
  padding: 15px 40px;
  text-align: center;
}
.btnimg {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}
      <button class="lightgray-btn rightbuttons">
    <img class="btnimg" src="http://lorempixel.com/output/food-q-c-27-24-8.jpg" alt="" />
    some text
  </button>

  2. You should not use a button for a simple link. Instead, use a link and style it. You can do it like this for example :

    .btn {
  position: relative;
  display: block;
  width: 200px;
  height: 50px;
  padding: 6px;
  text-decoration: none;
  background-color: #af0c0c;
  color: #fff;
}
.btn img {
  float: left;
}
.btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
    <a href="" class="btn">
	<img src="//lorempicsum.com/futurama/50/50/2" alt="" />
    <span>Lorem ipsum</span>
</a>

  3. You can specify a minimum width for your background-image and apply the same as padding in left and right of the text. This way your text wont overlap the background-image.

  4. Here’s a simpler way of doing it:

    .myawesomebutton img
{
 float:left;
}
.myawesomebutton span
{
 position:absolute;
 top:50%;
 left:50%;
 -webkit-transform:translate(-50%, -50%);
 transform:translate(-50%, -50%);
}

<a href="#" class="myawesomebutton">
    <img src="myawesomeimages/myawesomeimage.png"/>
    <span>My awesome button</span>
</a>