Como personalizar as cores dos botões do Elementor

Escrito por

Compartilhe este artigo

Compartilhar no facebook
Compartilhar no linkedin
Compartilhar no twitter
Compartilhar no email

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

rodrigo milano tipos de botao elementor - Como personalizar as cores dos botões do Elementor
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.

rodrigo milano css adicional wordpress - Como personalizar as cores dos botões do Elementor

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:

rodrigo milano cores botoes elementor - Como personalizar as cores dos botões do Elementor

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.

Compartilhe

Curso Elementor Grátis

Aprenda o construtor de sites mais usado atuamente

Explore mais artigos

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

Compartilhe

Tirar os números do menu hambúrguer no Elementor

Em algumas versões do Elementor tem aparecido 3 números ao lado das linhas do menu hamburger. Eu pesquisei na internet e encontrei uma solução no Reddit. Foi postada pelo usuário Kaddidle neste thread. Veja na imagem como está aparecendo com o bug Para corrigir este bug, você precisará inserir um código de CSS na área

Compartilhe

Quer dar um gás no seu site?

Vamos bater um papo que eu te ajudo

CTA post - Como personalizar as cores dos botões do Elementor