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

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:

/*
 * Cores de botões
 */
  
.elementor-button{
background-color: #FBC3BC;
color: #8A1708;
}
.elementor-button:hover{
background-color: #DC877C;
color: #fff;

}

.elementor-element.elementor-button-warning .elementor-button {
    background-color: #f0ad4e;
}
.elementor-element.elementor-button-info .elementor-button {
    background-color: #8A1708;
color: #FBC3BC;
}
.elementor-element.elementor-button-info .elementor-button:hover {
    background-color: #FBC3BC;
color: #8A1708;
}
.elementor-element.elementor-button-success .elementor-button {
    background-color: #80CFD1;

}
.elementor-element.elementor-button-success .elementor-button:hover {
    background-color: #468e90;
color: #FFF;
}

.elementor-element.elementor-button-warning .elementor-button {
    background-color: #1da1f2;
    color: #fffefe;
}
.elementor-element.elementor-button-warning .elementor-button:hover {
    background-color: #12557d;
    color: #a8deff;
}
.elementor-element.elementor-button-danger .elementor-button {
    background-color: #ffa82d;
    color: white;
}

.elementor-element.elementor-button-danger .elementor-button:hover {
    background-color: #ffd69c;
    color: #b17b01;
}

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.