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.

Curso Elementor Grátis

Aprenda o construtor de sites mais usado atuamente

Explore mais artigos

Elementor não carrega – painel de widgets

Quando você tenta editar uma página no Elementor, o painel dos widgets não carrega e fica aquele ícone girando eternamente? Abaixo eu listo algumas possíveis soluções. Este artigo é uma tradução da documentação original do Elementor. Siga as etapas abaixo para solucionar problemas: Verifique se você atende aos requisitos do sistema. Você pode verificar se

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

Curso Elementor Grátis

Aprenda todos os Widgets do Elementor nesse Curso Elementor exclusivo para você