Site principal

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);
}