Categorias: CSS

Estilizando Ícones de Botões

Escrito por Amanda de Lavra

13 de março de 2020

Normalmente, uso os ícones em botões para que eles tenham um efeito diferente em hover, mas no último site que desenvolvi, o layout exigia que os ícones aparecessem o tempo todo e também que tivessem estilos diferentes do botão. O Divi, tanto no módulo Botão, quanto em outros módulos que usam botões (nesse caso, foi o Slider e o Formulário de Contato), não dá opções para estilizar os ícones diferentemente. Para que o ícone apareça mesmo quanto o botão não estiver em foco, há uma opção que pode ser marcada. Segue abaixo as imagens dos 3 botões e o código css para registro.

  #botao-home.et_pb_custom_button_icon.et_pb_button::after {
    background-color: #C10B12;
    padding: 3px 10px;
    border-radius: 27px;
  }
  
  .et_pb_slide_description a.et_pb_button.et_pb_custom_button_icon.et_pb_more_button::before {
    background-color: #C10B12;
    padding: 3px 8px;
    border-radius: 27px;
  }
 
  #et_pb_contact_form_0 .et_pb_button::after {
    font-weight: 700;
  }

Posts relacionados

Customizações da página de login e painel administrativo do WordPress

Customizações da página de login e painel administrativo do WordPress

Para todo o site que eu faço, personalizo a página de login e também o wp-admin para ficar com a marca do cliente. Recentemente, aperfeiçoei o código para que o login ficasse no meio da página, tanto verticalmente quanto horizontalmente. Segue código usado aqui neste...

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...

Como manter a proporção de um elemento com CSS

Como manter a proporção de um elemento com CSS

Me pediram para colocar um elemento flutuante no site com o preço de cada produto. Como os preços variam de acordo com o produto, eu não podia ajustar com padding apenas para que ficasse redondinho na proporção 1:1. Para isso, usei a propriedade do CSS aspect-ratio....