Como personalizar as cores dos botões do Elementor

Você já precisou inserir vários botões em um site feito com o Elementor?

Já notou que isso pode ser uma tarefa repetitiva e que te toma tempo? Sim, porque a cada botão inserido é preciso:

  • Escolher a cor do texto
  • Escolher a cor do fundo
  • Escolher a cor do texto pro mouse hover
  • Escolher a cor do fundo pro mouse hover

Mas não seria mais simples e rápido se já pudéssemos personalizar os estados do botão previamente?

Pois neste artigo eu vou te passar uma dica de CSS que vai poupar essa repetição.

Veja nesta imagem que o Elementor tem alguns tipos de botão pré definidos. O que vamos fazer é personalizar as cores de cada um deles com um CSS

Tipos de botão Elementor

O que vamos fazer é simplesmente inserir um código CSS no campo de CSS Adicional do nosso Tema WordPress.

Basta ir no meu do WordPress “Aparência” >> “Personalizar” >> “CSS Adicional”

Na imagem abaixo, você já vê o campo de CSS adicional já com o código preenchido.

Agora basta copiar e colar o código que vou te passar para ter botões personalizados

O código que eu usei vai deixar os botões com estes aspectos:

Legal? Depois basta você substituir as cores pelas cores do seu projeto.

Então, quando inserir o botão ele já virá com a cor Default e você só precisa alterar o Tipo de botão, como mostrei lá no começo do artigo.

Agora chega de conversa e pega o código:

Coisa linda, né? Tá pronto tudo pré definido pra sempre!

Se gostou deste artigo, compartilhe com aquele amigo que está tomando na cabeça também.

Ah, e entre no meu curso grátis aqui neste link.

Um abraço e até a próxima.

Compartilhe