Create multiple background button

Asked by At

I'm trying to do a button that have a double background, one that contains an icon (with fixed width) and the rest is normal text.

What I got for now is:

.button {
  position: relative;
  display: inline-block;
  background-color: red;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
}

span {
  background-color: blue;
  position: absolute;
  left: 0;
  width: 30px;
  text-align: center;
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>

<div class="button">
  <span>x</span> Test
</div>


<div class="button">
  <span><i class="fas fa-address-card"></i></span> Test
</div>

The problem of that method is that a 1px border is shown at the bottom and seems not very stable as method. How can I achieve this effect cleanly? Thanks

3 Answers

1
Paulie_D On

Set the height of the span to 100%

.button {
  position: relative;
  display: inline-block;
  background-color: red;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
}

span {
  background-color: blue;
  position: absolute;
  left: 0;
  height:100%;
  width: 30px;
  text-align: center;
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>

<div class="button">
  <span>x</span> Test
</div>


<div class="button">
  <span><i class="fas fa-address-card"></i></span> Test
</div>

0
Community On
button {
  position: absolute; 
  display: inline-block;
  background-color: red;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
}

span {
  background-color: blue;
  position: absolute;
  left: 0;

  width: 30px;
  text-align: center;
}

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Check the output here

0
MiXT4PE On

You could use display: grid to place the items and have them vertically and horizontally centered and a linear-gradient to control the colors. It is automatically responsive and will work with all values you apply for height or width of .button.

.button {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  text-align: center;
  background: linear-gradient(to right, lightblue 50%, lightcoral 50%);
  
  /* styling */
  width: 100px;
  height: 30px;
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />

<div class="button">
  <span>x</span> 
  Test
</div>

<br>

<div class="button">
  <i class="fas fa-address-card"></i>
  Test
</div>

In case you want the icon-part or the label-part to be a certain size just change grid-template-columns to something like grid-template-columns: 25% 75%; and the linear-gradient respectively (background: linear-gradient(to right, lightblue 25%, lightcoral 75%)).