[ANSWERED] html – How to make buttons with images on it.(like facebook)

Question 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>

Question 2

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>

Question 3

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>

Bollate

[ANSWERED] html – How to make buttons with images on it.(like facebook)

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by Sourav Singh

Comment posted by Temani Afif

Comment posted by stackoverflow.com/a/35466231/8620333

Comment posted by Vucko

By

Related Post

[ANSWERED] html – Move list item to the left in header/navigation menu

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

[ANSWERED] html – Child div has an offset border

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate