How to make buttons with images on it.(like facebook)

Question

I have horizontal wide button.

Now I want to put transparent png on it right-edge side.

Is it possible??

For example, this button looks having the 'f' mark on blue button's left edge.

 <button type="button" id="sendBy" 
    class="btn mx-auto" 
    style="background-color:rgba(43,162,42,1);
    color:white;
    margin:0px;padding:0px;font-size:0.8rem;width:90%;
    height:40px;border-radius:8px;"> 
    send</button>

Yes you can use after css property. Here is link ohttps://www.w3schools.com/cssref/sel_after.asp — Sourav Singh, Jan 28 '20 at 10:37

score 1 · Answer 1 · answered Jan 28 '20 at 10:43

1

There are many ways, but I like to use inline-flex on my button with two children, as flex offers many good properties:

button {
  background-color: rgba(43, 162, 42, 1);
  color: white;
  margin: 0px;
  padding: 0 1rem;
  font-size: 0.8rem;
  width: 90%;
  height: 40px;
  border-radius: 8px;
  
  display: inline-flex;
  align-items: center;
}

.col-text {
  flex-grow: 1;
}

<button type="button" id="sendBy" class="btn mx-auto">
  <span class="col-text">send</span>
  <span>icon</span>
</button>

answered Jan 28 '20 at 10:43

Vucko

20,555
10
56
107

1

changing the display of button to flexbox is not a good idea: https://stackoverflow.com/a/35466231/8620333 – Temani Afif Jan 28 '20 at 10:56
@TemaniAfif tnx for the info, but it seems to only effect "older" browsers? Or am I mistaken? I've only notices some issues with it on IE10/11. – Vucko Jan 28 '20 at 12:02

score 0 · Answer 2 · answered Jan 28 '20 at 10:49

Use an :after. EG:

.btn {
  background-color: rgba(43, 162, 42, 1);
  color: white;
  margin: 0px;
  padding: 0px;
  font-size: 0.8rem;
  width: 90%;
  height: 40px;
  border-radius: 8px;
  position: relative;
}
#sendBy {      
  padding-right:40px;/* make some space on the right for the image so that your text is still centered */
}
#sendBy:after {
  content: "";
  background: url('https://placeimg.com/50/50/any') no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  bottom: 5px;
  width: 40px;
}

<button type="button" id="sendBy" class="btn mx-auto">send</button>

How to make buttons with images on it.(like facebook)

2 Answers2