Site principal

Botões

Ver códigos
  • Botão O Novo Mercado
  • Botão avançado com luz de BG seguindo o cursor
  • Botão com BG preenchendo no hover
  • Botão com efeito 3D no hover
  • Botão preenchendo o BG em círculo no hover
  • Botão com brilho externo expandindo no hover
  • Botão com BG expandindo no hover
  • Botão com brilho no hover
  • Botão com ícone grande próximo a borda e rotacionando o ícone
  • Botão com borda animada passando para o lado
  • Brilho passando dentro do botão no hover
  • Botão com detalhe no canto
  • Botão preenchendo BG no hover
  • Botão com shapes expandindo no hover
  • Botão com shape preenchendo no hover
  • Botão com animação no BG
  • Botão preenchendo no hover com cortes nas laterais
  • botão com hover colorido passando no BG
  • Botão com efeito no hover
  • Botão LPL Cipa
  • Botão com luz no hover
  • Gradiente animado no botão
  • Botão piscando
  • Botões com cantos retos (sem clip-path)
  • Botão com animação em degradê
  • Aumentar os ícones dos botões
  • Botão Russo
  • Botão com Efeito Neon
  • Botão 3D com efeito de brilho + escala no Hover
  • Botão com Textura

Botão com ícone ao lado crescendo e girando no hover

  1. Adicione a classe btn ao botão
  2. modifique o padding do css conforme o padding do botão
  3. Adicione o código abaixo no CSS personalizado de um único widget

OBS: É USADO UM WIDGET DE IMAGEM AO LADO DO BOTÃO – NÃO É O ÍCONE DENTRO DO BOTÃO

            .btn .elementor-button:hover {
    filter: drop-shadow(-11px 6px 17.1px rgba(21, 24, 31, 0.86)); /*sombra do svg no hover*/
}

.btn .elementor-button:hover{
    box-shadow: inset 0 0 20px #937cff; /*brilho interno no hover*/
}

.btn .elementor-button-text{
    align-self: center;
}

.btn .elementor-button-icon{
    background: white;
    padding: 10px;
    border-radius: 100px;
    color: black !important;
    fill: black !important;
    position: absolute;
    top: 50%;
    left: 120%;
    transform: translate(-50%, -50%);
    transition: 0.5s ease all
}

.btn:hover .elementor-button-icon{
    background: white;
    padding: 10px;
    border-radius: 100px;
    color: black !important;
    fill: black !important;
    position: absolute;
    top: 50%;
    left: 120%;
    transform: translate(-50%, -50%) scale(1.1) rotate(-45deg);
}