post

Botão Personalizado CSS para Landing Pages em Elementor com Efeito Pulsar Sombra para Destaque

Publicado em: 26/02/2024 / Atualizado em: 28/02/2024

Categorias: BlogCSSElementorWordpress

Se você quer criar um botão personalizado que chame a atenção do usuário para uma determinada ação (CTA), este código pode lhe ajudar.

Este código CSS abaixo, personaliza os botões CTA da página criada com Elementor, trazendo uma estética totalmente diferente.

Alem de deixar o botão com 3 tipos de cores em degradê (gradient), ele também adicione um efeito de “pulsar” no botão, que emite uma onda simples em torno do botão, trazendo mais destaque.

Segue abaixo código pronto para páginas criadas em Elementor:

.elementor-button {
  /* DEGRADE AZUL COM ROXO */
  --cor-de-fundo: linear-gradient(144deg,#00DDEB, #5B42F3 50%,#AF40FF);
  --cor-da-sombra: 0, 159, 255;
  
  /* VERDE 
  --cor-de-fundo: #69c144;
  --cor-da-sombra: 105, 193, 68;
  */
  
  /* LARANJA 
  --cor-de-fundo: #ff8400;
  --cor-da-sombra: 255, 132, 0;
  */
}
  
.elementor-button {
  align-items: center;
  background: var(--cor-de-fundo) !important;
  border: 0;
  box-shadow: rgb(var(--cor-da-sombra) / 55%) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  animation: pulseButton 3s infinite;
  transition-duration: .3s;
  transition-property: transform;

  /* OPCIONAL */
  border-radius: 8px;
  padding: 16px 40px;
  font-weight: 700;
  font-size: 20px;
  font-family: inhirit, arial, sans-serif;
}

.elementor-button:active,
.elementor-button:hover {
  outline: 0;
}

.elementor-button:hover {
  transform: scale(1.1);
  transition-duration: .3s;
  transition-property: transform;
}

@keyFrames pulseButton {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--cor-da-sombra), 1);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(var(--cor-da-sombra), 0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(var(--cor-da-sombra), 0);
    }
}

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/4526

ID de Referência: 4526

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato