CODEWITHSUNDEEP
htmlcss
Keaire
Keaire

Reputation: 899

Create multiple background button

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

Upvotes: 0

Views: 61

Answers (2)

leonheess
leonheess

Reputation: 21391

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%)).

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115046

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>

Upvotes: 1

Related Questions