Cole isso no Widget HTML | leia as informações abaixo
Insira o link desejado do botão entre as áspas na parte a href=”COLOQUE SEU LINK AQUI”.
Se quiser que o link abra na mesma página, remova o target=”_blank”.
<div class="containerBotoes">
<a href=" COLOQUE SEU LINK AQUI " target= "_blank">
<button class="botaoSuperior">APROVEITAR DESCONTO</button>
<button class="botaoInferior">APROVEITAR DESCONTO</button>
</a>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
let botoesSuperior = document.querySelectorAll(".botaoSuperior");
botoesSuperior.forEach((botaoSuperior) => {
botaoSuperior.addEventListener("mouseenter", () => {
botaoSuperior.style.animation = "mascara .7s steps(22) forwards";
});
botaoSuperior.addEventListener("mouseleave", () => {
botaoSuperior.style.animation = "mascaraInverso .7s steps(22) forwards";
});
});
});
</script>
Código CSS
.containerBotoes{
width: 200px;
height: 60px;
position: relative;
}
.botaoSuperior, .botaoInferior{
width: 100%;
height: 100%;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size:16px;
letter-spacing: 2px;
border-radius: 20px;
border: none;
}
.botaoSuperior{
background: linear-gradient(130deg, rgb(80, 14, 221), rgb(169, 16, 207));
color: rgba(255, 255, 255, 0.903);
mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
-webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
mask-size: 2300% 100%;
mask-position: 0 0;
-webkit-mask-size: 2300% 100%;
z-index: 1;
position: relative;
}
.botaoInferior{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
width: 98%;
height: 98%;
background-color: white;
color: black;
}
@keyframes mascara{
to{
mask-position: 100% 0;
}
}
@keyframes mascaraInverso{
from{
mask-position: 100% 0;
}to{
mask-position: 0% 0;
}
}
