Hello, I'm trying to add a percentage label to a button but I can't do it, I would really appreciate your help.
This is how the buttons should look with their labels that the percentage value is dynamic
so far i have tried this
<div>
<span class="etiquetaOferta">{{redondeo(itemi.porcentajeDescuento)}}%</span>
<img class="imageOferta" src='../../../../../../assets/images/icons/etiqueta-oferta.svg'>
<button>
07:20 - 07:40
</button>
with css
.imageOferta {
position: absolute;
width: 20px;
margin-left: 13%;
margin-top: 1px;
}
span.etiquetaOferta {
position: absolute;
font-weight: bold;
color: white;
font-size: 8px;
margin-left: 125px;
margin-top: 3px;
z-index: 1;
}
You can use
position: absolute;
to position the label inside the button. The triangle shape at the bottom of the label can be created with :after adding transparent borders.A solution on my part would be to put everything inside the button. Taking into account that you are using bootstrap and an image as a label, it would look like this:
Here the image is not seen
.svg
because I put the same path of your local files