[Vídeo] Botão Borda Degradê no Elementor com CSS Personalizado - Bruno Devx - BR Criativus

post #6766

[Vídeo] Botão Borda Degradê no Elementor com CSS Personalizado

Publicado em: 10/12/2025 / Atualizado em: 10/12/2025

Categorias: BlogBotãoCSSDegradêDestacarElementor

Aprenda a criar um botão personalizado com degradê interno e na borda usando CSS personalizado no Elementor. Com esse recurso, é possível destacar botões em seu site de forma mais chamativa e atrativa para os visitantes. Assista ao vídeo para aprender a técnica e não se esqueça de curtir e se inscrever no canal para mais dicas!

Segue abaixo o código CSS para criar o botão personalizado no Elementor:

.button-custom a {
  /* COR DO DEGRADE */
  background: linear-gradient(90deg, #4285f0 14.62%, #002f7b 86.36%) padding-box,
  linear-gradient(to right, #fff, #4285f0) border-box !important;

  align-items: center;
  border: 2px solid transparent !important;
  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;
}

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=6766

ID de Referência: 6766

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