Revolucione Seus Botões: Crie Efeitos Hipnotizantes com Este Código CSS Poderoso

A Magia do CSS: Animação e Estilização de Botões com o Selector .elementor-button

O CSS é uma ferramenta poderosa no arsenal de qualquer desenvolvedor web, permitindo a criação de interfaces dinâmicas e visualmente atraentes. Um exemplo perfeito disso é o código abaixo, que traz uma animação elegante e um efeito de luz pulsante para botões estilizados com a classe .elementor-button.

.elementor-button {
animation: LUZ 1.5s infinite;
box-shadow: 0px 0px 20px -5px #693dc0;
/*mude a cor aqui*/
}

@keyframes LUZ {
70% {
box-shadow: 0 0 0 30px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}

Este código CSS se divide em duas partes principais: a estilização do botão com a classe .elementor-button e a definição da animação com @keyframes.

1. Estilizando o Botão

No seletor .elementor-button, aplicamos uma animação chamada LUZ, com duração de 1.5 segundos, repetida infinitamente (infinite). O efeito de luz é simulado com a propriedade box-shadow, que adiciona uma sombra externa ao botão. Neste caso, a sombra tem uma cor roxa (#693dc0) e um leve desfoque, criando um brilho suave ao redor do botão.

2. Animação com @keyframes

A declaração @keyframes LUZ define as etapas da animação.

• 70%: A sombra se expande para um raio de 30px, tornando-se transparente. Esse é o momento em que o botão parece pulsar, simulando uma emissão de luz.
• 100%: A sombra volta ao seu estado original, desaparecendo completamente.

Personalização

O comentário /*mude a cor aqui*/ indica que o tom do efeito de luz pode ser facilmente ajustado alterando o valor de cor no box-shadow. Assim, você pode adaptar a aparência do botão para combinar com a paleta de cores do seu site.

Aplicações e Impacto

Este tipo de animação é ideal para destacar botões de ação, como “Compre Agora” ou “Saiba Mais”, atraindo a atenção do usuário sem ser excessivamente chamativo. É uma forma de criar uma experiência de usuário mais interativa e envolvente, incentivando o engajamento.

Considerações Finais

Com este código, você pode transformar botões simples em elementos dinâmicos que melhoram a estética e a usabilidade do seu site. Experimente ajustar a cor e o tempo da animação para criar efeitos únicos e personalizados, e não se esqueça de testar a performance em diferentes dispositivos para garantir uma experiência fluida para todos os usuários.