✦ 1º Passo
Assista ao tutorial
✦ 2º Passo
Copie os códigos
Clique no botão ''Copiar'' para copiar os códigos diretamente.
JavaScript
<script>
document.addEventListener("DOMContentLoaded", () => {
const brilho1Elements = document.querySelectorAll(".brilho1");
const brilho2Buttons = document.querySelectorAll(".brilho2 .elementor-button");
brilho2Buttons.forEach((brilho2Button, index) => {
const brilho1 = brilho1Elements[index];
let timeoutId;
if (brilho1 && brilho2Button) {
brilho2Button.addEventListener("mousemove", (event) => {
clearTimeout(timeoutId);
brilho2Button.classList.add("hovering");
const brilho1Rect = brilho1.getBoundingClientRect();
const mouseX = event.clientX - brilho1Rect.left;
const mousePercentage = Math.min(Math.max(mouseX / brilho1Rect.width, 0), 1);
brilho1.style.setProperty("--before-opacity", mousePercentage.toFixed(2));
brilho1.style.setProperty("--after-opacity", (1 - mousePercentage).toFixed(2));
const buttonRect = brilho2Button.getBoundingClientRect();
const relativeMouseX = event.clientX - buttonRect.left;
const translateX = ((relativeMouseX / buttonRect.width) * 100) - 100;
brilho2Button.style.setProperty("--button-translate-x", `${translateX}%`);
});
brilho2Button.addEventListener("mouseleave", () => {
brilho2Button.classList.remove("hovering");
timeoutId = setTimeout(() => {
brilho1.style.setProperty("--before-opacity", "1");
brilho1.style.setProperty("--after-opacity", "0");
brilho2Button.style.setProperty("--button-translate-x", "-10%");
}, 1200);});}});});
</script>
CSS
.brilho2 .elementor-button {
background: #D1D1D1 !important;
border: 3px solid #fff;
padding: 15px 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
position: relative;
transition: 2s;
}
@media(max-width: 767px){
.brilho2 .elementor-button {
padding: 15px 30px;
}
}
.brilho2 .elementor-button:before {
background-image: radial-gradient(43.3% 44.23% at 50% 49.51%, #fffff7 29%, #fffacd 48.5%, #f4d2bf 60.71%, #f4d2bf00 100%);
filter: blur(5px);
width: 300px;
height: 150px;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(var(--button-translate-x, -10%), -50%);
border-radius: 100%;
transition: transform 0.8s cubic-bezier(.4, 0, .2, 1);
}
.brilho2 .elementor-button.hovering:before {
transition: transform 0.15s ease-out !important;
}
.brilho1{
padding: 0px !important;
border-radius: 100px;
outline: 4px solid #FFFFFF4F;
}
.brilho1::before {
transition: 0.35s ease-out;
filter: blur(12px);
background: linear-gradient(to right, transparent 30%, #ff7037 80%, #ff4900 95%);
width: 108%;
height: 125%;
left: 50%;
top: 50%;
content: "";
will-change: filter;
border-radius: 100px;
position: absolute;
transform: translate(-50%, -50%);
z-index: 1;
opacity: var(--before-opacity, 1);
}
.brilho1::after {
transition: 0.35s ease-out;
filter: blur(12px);
background: linear-gradient(to left, transparent 30%, #ff7037 80%, #ff4900 95%);
width: 108%;
height: 125%;
left: 50%;
top: 50%;
content: "";
will-change: filter;
border-radius: 100px;
position: absolute;
transform: translate(-50%, -50%);
z-index: 1;
opacity: var(--after-opacity, 0);
}
.brilho2 .elementor-button-text,
.brilho2 .elementor-button-icon {
z-index: 5;
align-self: center !important;
vertical-align: center !important;
}
.brilho1 {
width: fit-content;
overflow: visible;
z-index: 1;
position: relative;
padding: 0px;
}
.brilho2 {
z-index: 5;
overflow: hidden;
border-radius: 100px;
position: relative;
}
✦ 3º Passo
Amplie as possibilidades
Gostou desse código ? Imagine ter mais de 200 como esse.
Com o CSS PACK, você pode ter acesso a mais de 200 códigos como esse, já digitados e prontos para copiar e colar no Elementor, com videoaulas individuais, e um suporte exclusivo no WhatsApp. Clique no botão abaixo para saber mais !
