Acesse aqui os botões Premium
/* Botão de Alta Conversão Verde */
selector .elementor-button {
background: #27ae60;
color: white;
border-radius: 50px;
box-shadow: 0 10px 20px -10px rgba(39, 174, 96, 0.5);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
animation: pulse 2s infinite;
}
selector .elementor-button:hover {
background: #219150;
transform: translateY(-3px);
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(39, 174, 96, 0); }
100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}/* Botão com Borda Animada */
selector .elementor-button {
background: transparent;
color: #fff;
position: relative;
border-radius: 0;
border: none;
overflow: hidden;
transition: 0.2s;
font-weight: bold;
letter-spacing: 2px;
}
selector .elementor-button:hover {
background: #03e9f4;
color: #000;
box-shadow: 0 0 10px #03e9f4, 0 0 40px #03e9f4;
transition-delay: 0.5s; /* Espera a borda terminar */
}
/* Linhas que correm */
selector .elementor-button::before,
selector .elementor-button::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 2px solid transparent;
box-sizing: border-box;
border-radius: 4px;
}
/* Animação complexa simplificada para CSS puro */
selector .elementor-button::before {
top: 0;
left: 0;
border-top-color: #03e9f4;
border-right-color: #03e9f4;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
selector .elementor-button::after {
bottom: 0;
right: 0;
border-bottom-color: #03e9f4;
border-left-color: #03e9f4;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
selector .elementor-button:hover::before,
selector .elementor-button:hover::after {
width: 100%;
height: 100%;
}/* Botão Vidro Fosco Moderno */
selector .elementor-button {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px); /* O desfoque mágico */
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
border-radius: 15px;
font-weight: 500;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
transition: 0.3s ease;
}
selector .elementor-button:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.02);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}/* Botão Neon Azul */
selector .elementor-button {
background-color: transparent;
color: #03e9f4;
border: 2px solid #03e9f4;
border-radius: 5px;
font-weight: bold;
text-transform: uppercase;
box-shadow: 0 0 5px #03e9f4, inset 0 0 5px #03e9f4;
transition: 0.3s;
}
selector .elementor-button:hover {
background-color: #03e9f4;
color: #000;
box-shadow: 0 0 20px #03e9f4, 0 0 40px #03e9f4;
border-color: #03e9f4;
}/* Botão Gradiente Roxo/Rosa */
selector .elementor-button {
background-image: linear-gradient(to right, #8e2de2 0%, #4a00e0 51%, #8e2de2 100%);
background-size: 200% auto;
color: white;
border-radius: 50px;
border: none;
box-shadow: 0 0 20px #eee;
font-weight: 600;
transition: 0.5s;
}
selector .elementor-button:hover {
background-position: right center; /* Move o gradiente */
color: #fff;
box-shadow: 0 5px 15px rgba(142, 45, 226, 0.4);
}/* Botão Dourado Metálico */
selector .elementor-button {
background: linear-gradient(135deg, #d4af37 0%, #aa8a28 100%);
color: white;
border: 1px solid #aa8a28;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
selector .elementor-button:hover {
background: white;
color: #aa8a28;
box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}/* Botão Neo-Brutalist Pop */
selector .elementor-button {
background-color: #FFD600; /* Amarelo Impacto */
color: #000000;
border: 3px solid #000000;
border-radius: 8px;
box-shadow: 6px 6px 0px #000000; /* Sombra dura deslocada */
font-weight: 800;
text-transform: uppercase;
transition: all 0.2s ease;
}
selector .elementor-button:hover {
transform: translate(2px, 2px); /* Move levemente */
box-shadow: 2px 2px 0px #000000; /* A sombra diminui */
}
selector .elementor-button:active {
transform: translate(6px, 6px);
box-shadow: none; /* Sombra some (clique total) */
}/* Botão Aurora Dark */
selector .elementor-button {
background: #111;
color: #fff;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 30px;
position: relative;
z-index: 1;
overflow: visible; /* Permite o brilho sair da caixa */
transition: 0.4s;
}
/* O brilho colorido atrás */
selector .elementor-button::before {
content: "";
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc);
z-index: -1;
border-radius: 35px;
filter: blur(10px); /* O segredo do efeito neon suave */
opacity: 0.7;
transition: opacity 0.4s;
}
selector .elementor-button:hover {
transform: scale(1.05);
background: #000; /* Fica mais escuro no hover para contraste */
}
selector .elementor-button:hover::before {
opacity: 1; /* Brilho máximo */
filter: blur(15px);
}/* Botão com Efeito de Sonar/Radar no Hover */
selector .elementor-button {
background: #00b894; /* Verde Água Sólido */
color: white;
border: none;
border-radius: 50px;
font-weight: 700;
position: relative;
z-index: 1;
}
/* Criação dos anéis (pseudo-elementos) */
selector .elementor-button::before,
selector .elementor-button::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100%; height: 100%;
border: 2px solid #00b894;
border-radius: 50px;
opacity: 0; /* Invisível inicialmente */
z-index: -1;
}
selector .elementor-button:hover::before {
animation: sonar-effect 1.5s infinite ease-out;
}
selector .elementor-button:hover::after {
/* O segundo anel começa com atraso */
animation: sonar-effect 1.5s 0.4s infinite ease-out;
}
@keyframes sonar-effect {
0% { width: 100%; height: 100%; opacity: 0.8; }
100% { width: 200%; height: 250%; opacity: 0; } /* Expande e desaparece */
}/* Botão Branco com Sombra Colorida */
selector .elementor-button {
background-color: #ffffff;
color: #333;
border-radius: 12px;
font-weight: 600;
border: none;
/* Sombra azul suave abaixo */
box-shadow: 0 10px 25px -5px rgba(66, 133, 244, 0.4);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
selector .elementor-button:hover {
transform: translateY(-4px);
/* Sombra aumenta e muda de cor levemente */
box-shadow: 0 15px 30px -5px rgba(66, 133, 244, 0.6);
color: #4285f4; /* Texto fica azul */
}/* Botão Laranja Varejo 3D */
selector .elementor-button {
background: linear-gradient(to bottom, #ff5722 0%, #e64a19 100%);
border-radius: 6px;
border-bottom: 5px solid #bf360c; /* A borda que cria o 3D */
color: #fff;
font-weight: 800;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
transition: all 0.1s;
margin-bottom: 5px; /* Espaço para a sombra não comer o layout */
}
selector .elementor-button:active {
border-bottom: 0px solid #bf360c;
transform: translateY(5px);
box-shadow: inset 0 3px 5px rgba(0,0,0,0.2);
}/* Botão Líquido que muda de forma */
selector .elementor-button {
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
border: none;
font-weight: bold;
/* A mágica da forma orgânica inicial */
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
transition: all 1s ease-in-out;
box-shadow: 0 10px 20px rgba(255, 107, 107, 0.4);
animation: morph 8s ease-in-out infinite; /* Movimento constante */
}
selector .elementor-button:hover {
transform: scale(1.05);
background: linear-gradient(45deg, #FF8E53, #FF6B6B);
}
@keyframes morph {
0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}/* Botão com Borda Gradiente Real */
selector .elementor-button {
background: #0d0d0d; /* Fundo quase preto */
color: #fff;
border: 2px solid transparent; /* Truque para a borda */
border-radius: 50px;
background-image: linear-gradient(#0d0d0d, #0d0d0d),
linear-gradient(90deg, #f35626, #feab3a); /* As cores do gradiente */
background-origin: border-box;
background-clip: padding-box, border-box;
font-weight: 600;
box-shadow: 0 10px 30px -10px rgba(243, 86, 38, 0.3); /* Sombra colorida */
transition: 0.3s;
}
selector .elementor-button:hover {
box-shadow: 0 10px 40px -5px rgba(243, 86, 38, 0.6);
transform: translateY(-3px) scale(1.02);
/* Inverte levemente o brilho */
filter: brightness(1.2);
}/* Botão com Brilho que passa sozinho */
selector .elementor-button {
background: #FF0054; /* Rosa Venda Forte */
color: white;
border-radius: 8px;
border: none;
font-weight: bold;
overflow: hidden; /* Importante para cortar o brilho */
position: relative;
z-index: 1;
box-shadow: 0 5px 15px rgba(255, 0, 84, 0.3);
}
/* O facho de luz */
selector .elementor-button::after {
content: '';
position: absolute;
top: 0;
left: -200%; /* Começa longe da tela */
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
transform: skewX(-20deg); /* Inclina o facho */
animation: shine-sweep 3s infinite; /* Roda a cada 3s */
}
@keyframes shine-sweep {
0% { left: -100%; }
20% { left: 200%; } /* Passa rápido */
100% { left: 200%; } /* Fica parado esperando */
}
selector .elementor-button:hover {
transform: scale(1.05);
background: #d60047;
}/* Botão Jelly / Gelatina */
selector .elementor-button {
background: #6c5ce7;
color: white;
border-radius: 50px;
border: none;
font-weight: bold;
padding: 15px 40px;
}
/* Animação ao passar o mouse */
selector .elementor-button:hover {
animation: jelly 0.5s;
background: #5b4cc4;
}
@keyframes jelly {
0%, 100% { transform: scale(1, 1); }
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}/* Botão Luxo Black Piano */
selector .elementor-button {
background-color: #000000;
color: #ffffff;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 3px; /* Espaçamento chique */
font-size: 14px;
transition: all 0.5s ease;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
selector .elementor-button:hover {
background-color: #1a1a1a;
letter-spacing: 5px; /* As letras se abrem */
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
border-color: #ffffff;
}/* Botão com efeito Glitch RGB */
selector .elementor-button {
background: #000;
color: #fff;
border: 1px solid #fff;
border-radius: 0px; /* Quadrado combina mais com glitch */
font-family: 'Courier New', monospace; /* Fonte estilo código */
font-weight: 700;
position: relative;
overflow: hidden;
}
selector .elementor-button::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,0,0,0.8), rgba(0,0,255,0.8), transparent);
transition: 0.1s;
opacity: 0;
}
selector .elementor-button:hover {
text-shadow: 2px 0 #ff0000, -2px 0 #0000ff; /* Separa as cores do texto */
box-shadow: 5px 5px 0px #888;
transform: translate(-2px, -2px);
}
selector .elementor-button:hover::before {
left: 100%;
opacity: 1;
transition: 0.3s;
}/* Botão com Reflexo de Luz Angular */
selector .elementor-button {
background: #e74c3c; /* Vermelho Oferta */
color: white;
border: none;
border-radius: 5px;
font-weight: 800;
text-transform: uppercase;
position: relative;
overflow: hidden; /* Corta o excesso de luz */
z-index: 1;
transition: 0.3s;
}
/* O facho de luz */
selector .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
/* Gradiente transparente -> branco -> transparente */
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.4),
transparent
);
transition: 0.5s;
}
selector .elementor-button:hover {
background: #c0392b; /* Escurece levemente o fundo */
box-shadow: 0 10px 20px rgba(192, 57, 43, 0.4);
}
selector .elementor-button:hover::before {
left: 100%; /* A luz atravessa o botão */
}/* Botão Slide Diagonal */
selector .elementor-button {
background: transparent;
color: #0984e3; /* Cor do texto inicial */
border: 2px solid #0984e3;
border-radius: 6px;
font-weight: bold;
position: relative;
overflow: hidden; /* Segura o preenchimento dentro */
z-index: 1;
transition: color 0.4s ease;
}
/* O elemento que vai deslizar */
selector .elementor-button::before {
content: "";
position: absolute;
z-index: -1;
top: 0; left: -100%; /* Escondido na esquerda */
width: 100%; height: 100%;
background: #0984e3; /* Cor do preenchimento */
transition: transform 0.4s ease;
transform-origin: right;
transform: scaleX(0); /* Começa zerado */
transform: skewX(-20deg); /* Inclinação */
}
selector .elementor-button:hover {
color: #fff; /* Texto fica branco */
border-color: #0984e3;
}
selector .elementor-button:hover::before {
left: 0;
transform: scaleX(1.5); /* Cresce para preencher */
}/* Botão Texto Gradiente que vira Fundo */
selector .elementor-button {
background: #fff;
/* Define o gradiente no TEXTO */
background-image: linear-gradient(to right, #1fa2ff, #12d8fa, #1fa2ff);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; /* Texto transparente pra mostrar o fundo */
border: 2px solid #12d8fa;
border-radius: 50px;
font-weight: 800;
transition: 0.5s;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
selector .elementor-button:hover {
/* No hover, o fundo volta ao normal e o texto fica branco */
background-clip: border-box;
-webkit-background-clip: border-box;
-webkit-text-fill-color: #fff;
background-position: right center; /* Move o gradiente */
box-shadow: 0 5px 20px rgba(18, 216, 250, 0.4);
transform: translateY(-2px);
border-color: transparent;
}/* Botão Holográfico HUD */
selector .elementor-button {
background: rgba(0, 255, 255, 0.05); /* Fundo quase invisível */
color: #00ffff;
border: 1px solid rgba(0, 255, 255, 0.3);
box-shadow: 0 0 15px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: 4px; /* Letras bem separadas */
font-weight: 300;
backdrop-filter: blur(4px); /* Embaça o fundo do site atrás do botão */
position: relative;
overflow: hidden;
transition: 0.4s;
}
/* Linhas de escaneamento */
selector .elementor-button::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: repeating-linear-gradient(
0deg,
transparent 0px,
transparent 2px,
rgba(0, 255, 255, 0.1) 3px
);
z-index: -1;
}
selector .elementor-button:hover {
background: rgba(0, 255, 255, 0.2);
box-shadow: 0 0 30px rgba(0, 255, 255, 0.6), inset 0 0 20px rgba(0, 255, 255, 0.4);
text-shadow: 0 0 8px #00ffff;
letter-spacing: 6px; /* Abre as letras ao passar o mouse */
border-color: #00ffff;
}/* Botão Ouro Fosco Metálico */
selector .elementor-button {
/* Gradiente complexo para simular metal */
background: linear-gradient(135deg, #bf953f, #fcf6ba 45%, #b38728 55%, #fbf5b7 100%);
background-size: 200% auto;
color: #4a3b10; /* Marrom escuro para contraste rico */
border: 1px solid #a07e2a;
border-radius: 4px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
transition: 0.5s ease;
}
selector .elementor-button:hover {
background-position: right center; /* O brilho do metal corre */
color: #2b2209;
box-shadow: 0 8px 25px rgba(191, 149, 63, 0.4);
transform: translateY(-2px);
border-color: #fcf6ba;
}/* Botão Cosmic Void */
selector .elementor-button {
background: #000;
color: #fff;
border: none;
border-radius: 50px;
position: relative;
z-index: 1;
overflow: hidden;
font-weight: bold;
transition: 0.5s;
}
/* O brilho giratório atrás */
selector .elementor-button::before {
content: '';
position: absolute;
top: -50%; left: -50%; width: 200%; height: 200%;
background: conic-gradient(transparent, transparent, transparent, #ff00cc, #3333ff);
animation: rotate 4s linear infinite;
z-index: -2;
}
/* A capa preta interna para deixar só a borda brilhando */
selector .elementor-button::after {
content: '';
position: absolute;
inset: 3px; /* Espessura da borda */
background: #111;
border-radius: 48px;
z-index: -1;
transition: 0.5s;
}
selector .elementor-button:hover::after {
background: transparent; /* O fundo preto some, revelando a galáxia */
opacity: 0.8;
}
selector .elementor-button:hover {
color: #fff;
box-shadow: 0 0 30px rgba(51, 51, 255, 0.5);
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}/* Botão Neumorphism Soft Ceramic */
selector .elementor-button {
background: #e0e5ec; /* Cor base cinza claro */
color: #4d4d4d;
border-radius: 16px;
border: none;
font-weight: 700;
/* Sombras claras e escuras opostas criam o volume */
box-shadow:
9px 9px 16px rgb(163,177,198,0.6),
-9px -9px 16px rgba(255,255,255, 0.8);
transition: all 0.3s ease;
}
selector .elementor-button:hover {
color: #007bff;
transform: translateY(-2px);
/* Sombras ficam mais profundas */
box-shadow:
12px 12px 20px rgb(163,177,198,0.7),
-12px -12px 20px rgba(255,255,255, 0.9);
}
selector .elementor-button:active {
transform: translateY(2px);
/* Inverte a sombra para parecer pressionado */
box-shadow:
inset 6px 6px 10px rgb(163,177,198, 0.7),
inset -6px -6px 10px rgba(255,255,255, 0.9);
}/* Botão Glitch Agressivo */
selector .elementor-button {
background: #111;
color: #fff;
border: 1px solid #fff;
font-family: monospace; /* Fonte Hacker */
font-weight: 700;
position: relative;
box-shadow: 5px 5px 0px rgba(255,255,255,0.2);
}
selector .elementor-button:hover {
animation: glitch-anim 0.3s infinite;
background: #000;
color: #0f0; /* Texto vira verde matrix */
border-color: #0f0;
box-shadow: 5px 5px 0px #0f0;
}
/* Pseudo-elementos que criam os fantasmas coloridos */
selector .elementor-button:hover::before {
content: attr(data-text); /* Truque para duplicar texto */
position: absolute;
left: -2px; text-shadow: 1px 0 red;
background: #000;
overflow: hidden;
clip-path: inset(0 0 50% 0); /* Corta metade */
animation: glitch-anim-2 0.5s infinite linear alternate-reverse;
}
selector .elementor-button:hover::after {
content: attr(data-text);
position: absolute;
left: 2px; text-shadow: -1px 0 blue;
background: #000;
overflow: hidden;
clip-path: inset(50% 0 0 0); /* Corta a outra metade */
animation: glitch-anim-2 0.5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}/* Botão com Borda Gradiente Fina e Elegante */
selector .elementor-button {
background: #fff; /* Cor do miolo do botão */
color: #333;
/* O truque da borda gradiente */
background-clip: padding-box;
border: 3px solid transparent;
position: relative;
border-radius: 50px;
font-weight: 700;
transition: 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
/* A pintura da borda */
selector .elementor-button::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
margin: -3px; /* Tamanho da borda */
border-radius: inherit;
background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); /* Cores do Insta */
}
selector .elementor-button:hover {
/* No hover, o fundo fica transparente e mostra o gradiente total */
background: transparent;
color: white;
box-shadow: 0 10px 20px rgba(253, 29, 29, 0.3);
transform: translateY(-2px);
}/* Botão Inclinado Sport */
selector .elementor-button-wrapper {
/* Inclina o container inteiro */
transform: skewX(-15deg);
}
selector .elementor-button {
background: #000;
color: #fff;
border: none;
border-radius: 4px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
/* Desinclina o texto para ele ficar legível */
transform: skewX(15deg);
padding: 20px 50px;
transition: 0.3s;
/* Linha decorativa lateral */
border-left: 5px solid #e74c3c;
}
selector .elementor-button:hover {
background: #e74c3c; /* Muda para vermelho */
border-left: 5px solid #fff;
box-shadow: 10px 10px 20px rgba(0,0,0,0.3);
}
/* Dica: Ajuste a margem lateral no Elementor para não cortar a ponta *//* Botão 3D Fofinho */
selector .elementor-button {
background-color: #2ecc71; /* Verde Pastel */
color: white;
border: none;
border-radius: 20px; /* Bordas bem redondas */
font-weight: 800;
font-size: 18px;
padding-bottom: 15px; /* Espaço extra embaixo */
/* A mágica do 3D fofinho */
box-shadow:
0px 8px 0px #27ae60, /* A lateral escura do 3D */
0px 15px 20px rgba(0,0,0,0.2); /* Sombra no chão */
transition: all 0.1s ease;
transform: translateY(0);
}
selector .elementor-button:hover {
transform: translateY(-2px);
box-shadow:
0px 10px 0px #27ae60,
0px 20px 25px rgba(0,0,0,0.2);
}
selector .elementor-button:active {
/* O efeito de clique real */
transform: translateY(8px);
box-shadow:
0px 0px 0px #27ae60,
0px 0px 0px rgba(0,0,0,0);
}/* Botão Preto Glossy com Reflexo */
selector .elementor-button {
background: linear-gradient(to bottom, #444 0%, #222 50%, #000 51%, #111 100%);
color: #fff;
border: 1px solid #555;
border-radius: 6px;
font-weight: 600;
text-shadow: 0 -1px 0 #000;
box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
transition: 0.2s;
}
selector .elementor-button:hover {
/* Clareia levemente mantendo o brilho */
background: linear-gradient(to bottom, #555 0%, #333 50%, #111 51%, #222 100%);
box-shadow: 0 6px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
selector .elementor-button:active {
background: #000;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}/* Botão Textura de Seda */
selector .elementor-button {
/* Gradiente complexo suave */
background: linear-gradient(110deg, #f8a5c2 0%, #f78fb3 40%, #e66767 100%);
color: white;
border: none;
border-radius: 50px;
font-weight: 600;
letter-spacing: 1px;
box-shadow: 5px 5px 15px rgba(230, 103, 103, 0.3);
position: relative;
overflow: hidden;
transition: 0.4s;
z-index: 1;
}
/* O brilho que corre na seda */
selector .elementor-button::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 50%; height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-25deg);
transition: 0.5s;
z-index: -1;
}
selector .elementor-button:hover {
transform: scale(1.03);
box-shadow: 5px 10px 25px rgba(230, 103, 103, 0.5);
}
selector .elementor-button:hover::after {
left: 150%; /* Faz o brilho atravessar o botão */
transition: 0.7s ease-in-out;
}/* Botão Sci-Fi com Cantos Cortados */
selector .elementor-button {
--c: #00ff00; /* Cor Principal (Mude aqui se quiser) */
background: rgba(0, 20, 0, 0.8);
color: var(--c);
border: 1px solid var(--c);
border-radius: 0px; /* Remove arredondamento padrão */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
/* O corte nos cantos */
clip-path: polygon(
15px 0, 100% 0,
100% calc(100% - 15px),
calc(100% - 15px) 100%,
0 100%, 0 15px
);
transition: 0.3s;
}
selector .elementor-button:hover {
background: var(--c);
color: #000;
box-shadow: 0 0 20px var(--c);
padding-left: 40px; /* Desliza o texto para direita */
}/* Botão Pixel Art 8-Bit */
selector .elementor-button {
background: #3b82f6; /* Azul Pixel */
color: white;
border: none;
border-radius: 0;
font-family: 'Courier New', monospace; /* Fonte monoespaçada ajuda o look */
font-weight: 800;
text-transform: uppercase;
position: relative;
margin: 4px; /* Espaço para a sombra não cortar */
/* A mágica dos pixels nas bordas */
box-shadow:
inset 3px 3px 0px rgba(255,255,255,0.5), /* Brilho interno */
inset -3px -3px 0px rgba(0,0,0,0.3), /* Sombra interna */
4px 4px 0px #000000; /* Sombra externa dura */
transition: transform 0.1s;
}
selector .elementor-button:hover {
transform: translate(2px, 2px);
box-shadow:
inset 3px 3px 0px rgba(255,255,255,0.5),
inset -3px -3px 0px rgba(0,0,0,0.3),
2px 2px 0px #000000; /* Sombra diminui */
}
selector .elementor-button:active {
transform: translate(4px, 4px);
box-shadow: none;
}/* Botão Desenhado à Mão */
selector .elementor-button {
background: transparent;
color: #333;
font-weight: 800;
border: 3px solid #333;
/* Raios irregulares para parecer mão livre */
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
transition: 0.3s;
box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
}
selector .elementor-button:hover {
background: #333;
color: #fff;
/* Muda a forma no hover para parecer animado */
border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
border-color: #333;
transform: scale(1.02) rotate(-1deg);
}/* Botão Textura Dark Mesh */
selector .elementor-button {
background-color: #1a1a1a;
color: #ffffff;
border: 1px solid #333;
border-radius: 6px;
font-weight: 700;
/* Cria a textura de pontinhos/grade */
background-image:
radial-gradient(#444 15%, transparent 16%),
radial-gradient(#444 15%, transparent 16%);
background-size: 6px 6px;
background-position: 0 0, 3px 3px;
box-shadow: inset 0 0 10px #000; /* Sombra interna para profundidade */
transition: 0.3s;
}
selector .elementor-button:hover {
background-color: #000;
border-color: #e74c3c; /* Borda vermelha acende no hover */
color: #e74c3c;
box-shadow: inset 0 0 20px #000, 0 5px 15px rgba(0,0,0,0.5);
}/* Botão com Borda Viajante */
selector .elementor-button {
background: #000;
color: #fff;
border: none;
border-radius: 8px;
position: relative;
z-index: 1;
overflow: hidden;
font-weight: bold;
padding: 2px; /* Espaço para a borda aparecer */
}
/* O fundo giratório que cria a borda */
selector .elementor-button::before {
content: '';
position: absolute;
top: -50%; left: -50%; width: 200%; height: 200%;
background: conic-gradient(transparent, transparent, transparent, #00d2ff);
animation: rotate-border 3s linear infinite;
z-index: -2;
}
/* Ajuste no container do elementor para o layout não quebrar */
selector .elementor-button-content-wrapper {
display: contents;
}
/* A "capa" interna que deixa apenas a borda visível */
selector .elementor-button::after {
content: '';
position: absolute;
inset: 3px; /* Espessura da borda */
background: #151515;
border-radius: 6px;
z-index: -1;
transition: 0.3s;
}
selector .elementor-button:hover::after {
background: #222;
}
selector .elementor-button:hover {
box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
}
@keyframes rotate-border {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}/* Botão com Notificação Vermelha */
selector .elementor-button {
background-color: #333;
color: white;
border-radius: 8px;
position: relative; /* Necessário para posicionar a bolinha */
font-weight: 600;
transition: 0.3s;
margin-top: 10px; /* Espaço para a notificação não cortar */
margin-right: 10px;
}
/* A bolinha vermelha */
selector .elementor-button::after {
content: "1"; /* O número na notificação */
position: absolute;
top: -10px;
right: -10px;
background-color: #ff0000;
color: white;
font-size: 12px;
font-weight: bold;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff; /* Borda branca para separar */
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
animation: bounce-notify 2s infinite;
}
selector .elementor-button:hover {
background-color: #555;
transform: scale(1.02);
}
@keyframes bounce-notify {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}/* Botão com Sombra da Própria Cor (Glow) */
selector .elementor-button {
/* Mude a cor aqui e a mágica acontece */
background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
color: white;
border: none;
border-radius: 30px;
font-weight: bold;
position: relative;
z-index: 1;
transition: 0.3s;
/* Remove sombra padrão */
box-shadow: none;
}
/* O elemento borrado atrás */
selector .elementor-button::before {
content: "";
position: absolute;
top: 5px; left: 5px; right: 5px; bottom: 5px; /* Um pouco menor que o botão */
background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
z-index: -1;
filter: blur(20px); /* O desfoque forte */
opacity: 0.6;
transition: 0.3s;
}
selector .elementor-button:hover {
transform: translateY(-3px);
}
selector .elementor-button:hover::before {
opacity: 1; /* Brilho aumenta no hover */
filter: blur(25px);
bottom: -5px; /* Desce um pouco */
}/* Botão Estilo Sticker / Adesivo */
selector .elementor-button {
background-color: #FFD200; /* Amarelo Street */
color: #000;
font-weight: 900;
text-transform: uppercase;
border: 4px solid #ffffff; /* A borda do adesivo */
border-radius: 50px; /* Bem redondo */
/* Sombra dura para parecer colado */
box-shadow:
0 0 0 2px #000000, /* Linha preta fina fora do branco */
5px 5px 0px rgba(0,0,0,0.8);
transform: rotate(-2deg); /* Levemente torto */
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
selector .elementor-button:hover {
transform: rotate(0deg) scale(1.1); /* Endireita e cresce */
background-color: #ffe047;
box-shadow:
0 0 0 2px #000000,
8px 8px 0px rgba(0,0,0,0.8);
}/* Botão Cromado Prata */
selector .elementor-button {
/* Gradiente complexo para simular o horizonte do cromo */
background: linear-gradient(
to bottom,
#f0f0f0 0%,
#dcdcdc 50%,
#888888 51%,
#bfbfbf 100%
);
color: #000;
border: 1px solid #666;
border-radius: 4px;
font-weight: 800;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 5px 10px rgba(0,0,0,0.3);
transition: 0.2s;
}
selector .elementor-button:hover {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 8px 15px rgba(0,0,0,0.4);
}
selector .elementor-button:active {
background: linear-gradient(to bottom, #bfbfbf 0%, #888888 100%);
transform: translateY(2px);
}/* Botão Holográfico Iridescente */
selector .elementor-button {
color: #fff;
border: none;
border-radius: 8px;
font-weight: 700;
letter-spacing: 1px;
/* O arco-íris holográfico de fundo */
background-image: linear-gradient(
115deg,
#4fcf70,
#fad648,
#a767e5,
#12bcfe,
#4fcf70
);
background-size: 500% 100%; /* Estica o gradiente para animar */
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
z-index: 1;
transition: 0.3s ease-out;
}
/* O reflexo de luz branca (shimmer) */
selector .elementor-button::after {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 100%;
height: 100%;
/* Luz branca diagonal */
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
transform: skewX(-25deg);
z-index: -1;
}
selector .elementor-button:hover {
/* O fundo colorido se move rapidamente */
animation: holo-gradient 3s linear infinite alternate;
transform: scale(1.02);
box-shadow: 0 10px 30px rgba(167, 103, 229, 0.4);
}
selector .elementor-button:hover::after {
/* O reflexo branco passa correndo */
animation: holo-shine 1s ease-in-out;
}
@keyframes holo-gradient {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes holo-shine {
100% { left: 150%; }
}/* Botão com Seta Oculta que Desliza */
selector .elementor-button {
background: #2980b9; /* Azul Confiante */
color: white;
border-radius: 6px;
font-weight: 700;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding-right: 20px; /* Espaço normal */
overflow: hidden;
}
/* A seta (ícone criado via CSS) */
selector .elementor-button::after {
content: "→";
position: absolute;
right: -20px; /* Começa escondida fora do botão */
opacity: 0;
font-size: 20px;
transition: all 0.3s ease;
}
selector .elementor-button:hover {
background: #3498db;
padding-right: 45px; /* Abre espaço na direita */
transform: translateX(-5px); /* Move o botão levemente */
}
selector .elementor-button:hover::after {
right: 20px; /* Seta entra na área visível */
opacity: 1;
}/* Botão Metálico Platina */
selector .elementor-button {
/* Gradiente metálico complexo */
background: linear-gradient(
to bottom,
#f2f2f2 0%,
#d4d4d4 50%,
#aaaaaa 51%,
#e0e0e0 100%
);
color: #333; /* Texto escuro para contraste */
border: 1px solid #999;
border-radius: 4px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
box-shadow:
0 5px 15px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,1);
transition: all 0.2s;
}
selector .elementor-button:hover {
filter: brightness(1.05); /* Brilha mais */
transform: translateY(-2px);
box-shadow:
0 8px 20px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,1);
}
selector .elementor-button:active {
background: linear-gradient(to bottom, #d4d4d4 0%, #aaaaaa 100%);
box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
transform: translateY(1px);
}/* Botão Dark com Glow Interno Pulsante */
selector .elementor-button {
background-color: transparent;
color: #fff;
border: 2px solid #00d2ff; /* Ciano Neon */
border-radius: 50px;
font-weight: 700;
box-shadow:
0 0 10px rgba(0, 210, 255, 0.2),
inset 0 0 20px rgba(0, 210, 255, 0.2);
transition: 0.4s;
animation: inner-pulse 2s infinite ease-in-out;
}
selector .elementor-button:hover {
background-color: #00d2ff;
color: #000; /* Inverte a cor */
box-shadow:
0 0 40px rgba(0, 210, 255, 0.6),
inset 0 0 10px rgba(0,0,0,0.5);
transform: scale(1.05);
animation: none; /* Para de pulsar e foca no brilho */
}
@keyframes inner-pulse {
0% { box-shadow: 0 0 10px rgba(0, 210, 255, 0.2), inset 0 0 10px rgba(0, 210, 255, 0.1); }
50% { box-shadow: 0 0 20px rgba(0, 210, 255, 0.5), inset 0 0 30px rgba(0, 210, 255, 0.4); }
100% { box-shadow: 0 0 10px rgba(0, 210, 255, 0.2), inset 0 0 10px rgba(0, 210, 255, 0.1); }
}/* Botão Sólido de Segurança */
selector .elementor-button {
background-color: #27ae60;
color: white;
border: none;
border-radius: 6px;
font-weight: bold;
font-size: 18px;
padding: 18px 40px;
/* Sombra projetada para baixo */
box-shadow: 0 4px 0 #1e8449;
transition: all 0.2s;
margin-bottom: 5px;
}
selector .elementor-button:hover {
transform: translateY(-2px); /* Sobe um pouco */
box-shadow: 0 6px 0 #1e8449; /* Sombra aumenta para compensar */
}
selector .elementor-button:active {
transform: translateY(4px); /* Desce (clique) */
box-shadow: 0 0 0 #1e8449; /* Sombra some */
}/* Botão com Borda de Vidro Fosco */
selector .elementor-button {
background: transparent;
color: #fff;
font-weight: 700;
border-radius: 12px;
position: relative;
border: none; /* Remove borda padrão */
padding: 20px 40px;
}
/* O truque da borda fosca */
selector .elementor-button::before {
content: "";
position: absolute;
inset: 0; /* Cobre o botão todo */
border-radius: 12px;
padding: 4px; /* Espessura da borda de gelo */
/* Gradiente sutil para o gelo */
background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1));
/* A mágica do desfoque só na borda */
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
backdrop-filter: blur(10px); /* Embaça o que está atrás da borda */
}
selector .elementor-button:hover {
background: rgba(255,255,255,0.1); /* Leve preenchimento no hover */
transform: scale(1.02);
}/* Botão que salta do "buraco" */
selector .elementor-button {
background: #e0e5ec; /* Cor do fundo do seu site (importante!) */
color: #555;
border-radius: 10px;
font-weight: 800;
border: none;
/* Sombra INSET (para dentro) criando o buraco */
box-shadow:
inset 5px 5px 10px rgba(163,177,198,0.6),
inset -5px -5px 10px rgba(255,255,255, 0.8);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Salto elástico */
}
selector .elementor-button:hover {
color: #6c5ce7; /* Cor de destaque */
transform: translateY(-4px) scale(1.02); /* Salta para fora */
background: #fff;
/* Sombra normal e uma sombra colorida difusa */
box-shadow:
10px 10px 20px rgba(0,0,0,0.1),
0px 10px 30px rgba(108, 92, 231, 0.5); /* Sombra colorida */
}/* Botão com Textura Granulada (Noise) */
selector .elementor-button {
/* O gradiente de fundo */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 8px;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
border: none;
box-shadow: 0 10px 20px rgba(118, 75, 162, 0.4);
transition: 0.3s;
}
/* A camada de ruído (TV Chiado) feita com CSS puro */
selector .elementor-button::before {
content: "";
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background-image: repeating-radial-gradient(
#000 0 0.0001%,
#fff 0 0.0002%
); /* Simula pixels */
background-size: 5px 5px; /* Tamanho do grão */
opacity: 0.07; /* Sutileza do efeito */
z-index: -1;
pointer-events: none;
}
selector .elementor-button:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 30px rgba(118, 75, 162, 0.6);
filter: brightness(1.1);
}/* Botão com Cantos "Comidos" para Dentro */
selector .elementor-button {
background: #d4af37; /* Dourado */
color: #fff;
border: none;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
padding: 15px 40px;
/* A mágica do corte invertido usando gradiente radial como máscara */
mask:
radial-gradient(circle at top left, transparent 10px, #000 11px),
radial-gradient(circle at top right, transparent 10px, #000 11px),
radial-gradient(circle at bottom right, transparent 10px, #000 11px),
radial-gradient(circle at bottom left, transparent 10px, #000 11px);
mask-composite: intersect; /* Combina os cortes */
-webkit-mask:
radial-gradient(circle at top left, transparent 10px, #000 11px) top left,
radial-gradient(circle at top right, transparent 10px, #000 11px) top right,
radial-gradient(circle at bottom right, transparent 10px, #000 11px) bottom right,
radial-gradient(circle at bottom left, transparent 10px, #000 11px) bottom left;
-webkit-mask-size: 51% 51%;
-webkit-mask-repeat: no-repeat;
transition: transform 0.3s;
}
selector .elementor-button:hover {
transform: scale(1.1);
background: #c5a028;
}/* Botão Estilo Papel Dobrado */
selector .elementor-button {
background: #5dade2; /* Azul Suave */
color: #fff;
border: none;
font-weight: 700;
position: relative;
/* O corte no canto superior direito */
clip-path: polygon(
0 0,
calc(100% - 20px) 0,
100% 20px,
100% 100%,
0 100%
);
transition: 0.3s;
padding-right: 30px; /* Espaço para não cortar texto */
}
/* O triângulo da dobra */
selector .elementor-button::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 20px; height: 20px;
background: #34495e; /* Cor do verso do papel (escura) */
border-radius: 0 0 0 5px; /* Arredonda levemente */
transition: 0.3s;
}
selector .elementor-button:hover {
background: #3498db;
transform: translateY(-2px);
}
selector .elementor-button:hover::before {
background: #fff; /* A dobra fica branca no hover */
width: 25px; height: 25px; /* A dobra aumenta */
}/* Botão Estilo Scanlines VHS */
selector .elementor-button {
background: #111;
color: #00ff00; /* Verde terminal antigo */
border: 1px solid #00ff00;
border-radius: 4px;
font-family: monospace;
font-weight: bold;
position: relative;
box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
z-index: 1;
}
/* As linhas da TV (Scanlines) */
selector .elementor-button::after {
content: " ";
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: linear-gradient(
to bottom,
rgba(18, 16, 16, 0) 50%,
rgba(0, 0, 0, 0.25) 50%
);
background-size: 100% 4px; /* Espessura das linhas */
z-index: -1;
pointer-events: none;
}
selector .elementor-button:hover {
background: #00ff00;
color: #000;
box-shadow: 0 0 20px #00ff00;
text-shadow: none;
}/* Botão Bloco Arquitetônico */
selector .elementor-button {
background: #fff;
color: #000;
border: 3px solid #000;
border-radius: 0; /* Quadrado total */
font-weight: 900;
text-transform: uppercase;
/* A sombra fica longe */
box-shadow: 8px 8px 0px #ff6b6b;
transition: all 0.2s;
margin-right: 8px; /* Espaço para não cortar */
margin-bottom: 8px;
}
selector .elementor-button:hover {
transform: translate(-2px, -2px); /* Sobe um pouco */
box-shadow: 12px 12px 0px #ff6b6b; /* Sombra aumenta */
background: #fff; /* Garante fundo branco */
}
selector .elementor-button:active {
transform: translate(8px, 8px); /* Encaixa na sombra original */
box-shadow: 0px 0px 0px #ff6b6b; /* Sombra some */
}/* Botão Cupom com Tracejado Animado */
selector .elementor-button {
background-color: #fff;
color: #333;
font-weight: 700;
border-radius: 4px;
position: relative;
overflow: hidden;
transition: 0.3s;
/* Técnica de background linear para simular o tracejado */
background-image:
linear-gradient(90deg, #333 50%, transparent 50%),
linear-gradient(90deg, #333 50%, transparent 50%),
linear-gradient(0deg, #333 50%, transparent 50%),
linear-gradient(0deg, #333 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
background-position: 0px 0px, 100% 100%, 0px 100%, 100% 0px;
border: none;
padding: 15px 40px;
animation: border-dance 4s infinite linear;
}
selector .elementor-button:hover {
background-color: #f9f9f9;
color: #e74c3c; /* Muda cor do texto para dar destaque */
animation: border-dance 0.5s infinite linear; /* Acelera MUITO no hover */
}
@keyframes border-dance {
0% {
background-position: 0px 0px, 100% 100%, 0px 100%, 100% 0px;
}
100% {
background-position: 30px 0px, -30px 100%, 0px -30px, 100% 30px;
}
}/* Botão com Reflexo de Espelho Inferior */
selector .elementor-button {
background: #ff0055; /* Cor Neon */
color: #fff;
border: none;
border-radius: 8px;
font-weight: 800;
text-transform: uppercase;
box-shadow: 0 0 15px rgba(255, 0, 85, 0.5);
position: relative;
margin-bottom: 25px; /* Espaço para o reflexo não bater no conteúdo de baixo */
}
/* O reflexo */
selector .elementor-button::after {
content: "";
position: absolute;
top: 100%; /* Logo abaixo */
left: 0;
width: 100%;
height: 60%; /* Altura do reflexo */
background: inherit; /* Copia a cor do botão */
transform: scaleY(-1); /* Inverte de cabeça pra baixo */
opacity: 0.4;
/* Máscara para fazer o reflexo sumir suavemente (fade out) */
-webkit-mask: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
mask: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
pointer-events: none; /* O reflexo não é clicável */
transition: 0.3s;
}
selector .elementor-button:hover {
transform: translateY(-4px);
box-shadow: 0 0 30px rgba(255, 0, 85, 0.8);
}
selector .elementor-button:hover::after {
opacity: 0.6; /* Reflexo fica mais forte */
transform: scaleY(-1) translateY(4px); /* Acompanha o movimento */
}/* Botão Cortina que Abre do Centro */
selector .elementor-button {
background: transparent;
color: #000; /* Texto inicial sobre a cortina */
border: 2px solid #fff;
border-radius: 0;
font-weight: 700;
position: relative;
z-index: 1;
overflow: hidden;
transition: color 0.4s;
}
/* Metade Esquerda da Cortina */
selector .elementor-button::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 50%; height: 100%;
background: #fff;
z-index: -1;
transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
transform-origin: left;
}
/* Metade Direita da Cortina */
selector .elementor-button::after {
content: "";
position: absolute;
top: 0; right: 0;
width: 50%; height: 100%;
background: #fff;
z-index: -1;
transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
transform-origin: right;
}
selector .elementor-button:hover {
color: #fff; /* Texto vira branco quando a cortina abre */
}
selector .elementor-button:hover::before {
transform: scaleX(0); /* Cortina esquerda recolhe para o lado */
}
selector .elementor-button:hover::after {
transform: scaleX(0); /* Cortina direita recolhe para o lado */
}/* Botão Barra de Progresso */
selector .elementor-button {
background: transparent;
color: #333;
border: 2px solid #333;
border-radius: 50px;
font-weight: 800;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 0.4s;
}
/* A barra de carga */
selector .elementor-button::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 0%; /* Começa vazio */
height: 100%;
background: #27ae60; /* Verde Sucesso */
z-index: -1;
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Listras de "carregando" na barra */
selector .elementor-button::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: linear-gradient(
45deg,
rgba(255,255,255,0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
transparent 75%,
transparent
);
background-size: 20px 20px;
opacity: 0;
z-index: -1;
transition: opacity 0.4s;
}
selector .elementor-button:hover {
color: #fff;
border-color: #27ae60;
}
selector .elementor-button:hover::before {
width: 100%; /* Carrega até o fim */
}
selector .elementor-button:hover::after {
opacity: 1;
animation: move-stripes 1s linear infinite;
}
@keyframes move-stripes {
0% { background-position: 0 0; }
100% { background-position: 20px 20px; }
}/* Botão com Cantos de Mira (Brackets) */
selector .elementor-button {
background-color: rgba(0, 255, 255, 0.05); /* Fundo sutil tech */
color: #00e5ff;
border: none;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 20px 40px;
position: relative;
transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
/* Desenha os 4 cantos usando gradientes lineares */
background-image:
linear-gradient(#00e5ff, #00e5ff), /* Top Left Vertical */
linear-gradient(#00e5ff, #00e5ff), /* Top Left Horizontal */
linear-gradient(#00e5ff, #00e5ff), /* Top Right Vertical */
linear-gradient(#00e5ff, #00e5ff), /* Top Right Horizontal */
linear-gradient(#00e5ff, #00e5ff), /* Bottom Right Vertical */
linear-gradient(#00e5ff, #00e5ff), /* Bottom Right Horizontal */
linear-gradient(#00e5ff, #00e5ff), /* Bottom Left Vertical */
linear-gradient(#00e5ff, #00e5ff); /* Bottom Left Horizontal */
background-repeat: no-repeat;
/* Tamanho inicial dos cantos */
background-size: 2px 15px, 15px 2px, 2px 15px, 15px 2px, 2px 15px, 15px 2px, 2px 15px, 15px 2px;
/* Posição exata de cada pedaço da mira */
background-position:
0px 0px, 0px 0px, /* Top Left */
100% 0px, 100% 0px, /* Top Right */
100% 100%, 100% 100%, /* Bottom Right */
0px 100%, 0px 100%; /* Bottom Left */
}
selector .elementor-button:hover {
background-color: rgba(0, 229, 255, 0.2);
box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
letter-spacing: 4px; /* O texto expande dentro da mira */
/* Os cantos crescem no hover até quase se tocarem */
background-size: 2px 50%, 50% 2px, 2px 50%, 50% 2px, 2px 50%, 50% 2px, 2px 50%, 50% 2px;
}