HTML: Button with 2 Solid Colors & Ribbon Tag

How to create a button with two different solid colors that is being stacked together (top and bottom) with a ribbon tag? This is the final results.

Button with 2 different colors and ribbon tag

First, create a layer with button tag and put a bootstrap btn class to give a better look for it.

HTML

<div class="text center">
     <button class="btn">
          <img src="../soldout.png" />
          <p>Item Name</p><span>RM 40</span>
     </button>
</div>

To add 2 solid colors to the button, we can use linear gradient to make this illusion.

CSS

button.btn {
     background: linear-gradient(to bottom, #F58220 60%, #F09B35 61%)
}

to bottom

is the direction of the color gradient.

#F58220 60%

is the first color - top. It will set background color from 0 - 60% height of the button.

#F09B35 61%

is the second color - bottom. It will set background color from 61 - 100% height of the button.

After updating it to above code, the text somehow didn't align quite nice according to the colors. So, we need to align the text a bit.

CSS

button.btn p {
    /* this is to ensure there's a gap after p element inside the button with btn class */
    margin-bottom: 30px;
}

button.btn span {
    width: 100%; /* make the width 100% to ensure the text is centered */
    position: absolute; /* position type of span element */
    bottom: 5px; /* make sure that span element is placed 5px from bottom */
    right: 0; /* when width is 100%, the layer somehow overflow outside the button element, just set right to 0 will fix the issue */
}

Lastly, to put ribbon tag or any tag on top of the button, just add this below code in your CSS file.

CSS

button.btn img {
    position: absolute; /* position type of img element */

    top: -2px; /* positioned img a bit higher than the button, giving the ribbon effect */

    right: -2px; /* positioned img outside the the button, giving the ribbon effect */

    height: 95%; /* scale the img size based on height */
}

Tadaaa~ It's done! Anyway, you can always experiment with the value, tweak it a bit based on your needs/requirements. Have fun and happy coding!

p/s: It's fun right? <3