I'm currently working on creating a button with a dual background design, where one part features an icon with a fixed width and the other part displays normal text.
My current progress looks like this:
.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 issue with my current approach is that a thin 1px border appears at the bottom, making it look unstable. How can I achieve this desired effect in a cleaner manner? Thank you