Me pediram para colocar um elemento flutuante no site com o preço de cada produto. Como os preços variam de acordo com o produto, eu não podia ajustar com padding apenas para que ficasse redondinho na proporção 1:1. Para isso, usei a propriedade do CSS aspect-ratio. Mais detalhes sobre seu uso estão nesse tutorial: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp. O código HTML e CSS ficou assim:
<div id="preco">
<div id="botao-preco">
<p>A partir de<br>R$<span class="texto-preco">84</span>,72<br>mensais</p>
</div>
</div>/** PREÇO ********************************************************/
#preco {
position: fixed;
top: 25%;
left: 5px;
z-index: 99999;
}
#botao-preco {
width: 100%;
aspect-ratio: 1 / 1;
text-align: center;
background-color: #221B65;
border: 2px #ffffff solid;
border-radius: 100%;
padding: 15px;
display: flex;
align-items: center;
color: #ffffff;
font-size: 14px;
font-weight: 600;
font-family: Arial, Helvetica, sans-serif !important;
line-height: 1.5em;
}
#botao-preco:hover {
transform: scale(1.1);
transition: all 0.5s;
}
#botao-preco p {
margin-bottom: 0;
font-family: Arial, Helvetica, sans-serif !important;
line-height: inherit;
}
.texto-preco {
font-weight: 800;
font-size: 30px;
color: #f9c735;
line-height: 32px;
}A partir de
R$84,72
mensais
