Precisa criar um botão com efeito ao passar o mouse com Elementor ?
Se sim, sente-se neste magnífico autocarro, pois o que vamos conseguir hoje está no seguinte vídeo:
Vamos criar uma página e modificá-la com Elementore selecione uma estrutura de 2 colunas. No painel vamos modificar a seção recém-criada selecionando Altura Mínima no campo hauteur e imediatamente Altura Mínima vamos clicar em VH em seguida, defina o cursor para 100.
Na aba Style vamos mudar a cor de fundo para # 070e39.
Na primeira coluna, vamos soltar um widget de botão, modificar seu texto digitando Ver detalhes e vamos alinhá-lo à direita
Na aba Style vamos modificar isso tipografia alterando o tamanho em 15, transformação defende Maiúsculas et espaçamento entre letras defende 1.1
Na aba avançado, modifique tudo margens defende 20 e na seção CSS customizado, vamos colar o seguinte código que adiciona um gradiente ao botão:
selector {
–Btn-width: 180px;
–Btn-height: 50px;
–Btn-fundo: # 0e1538;
–Degradante esquerdo: # F803F8;
–Degradê direito: # 03F2FD;
}
seletor a {
position: relative;
largura: var (–btn-largura);
altura: var (–btn-altura);
}
seletor a: antes,
seletor a: após {
feliz: ";
posição: absoluta;
inserido: 0;
transição: 0.5s;
}
seletor a: n-ésimo filho (1): antes,
seletor a: n-ésimo filho (1): depois de {
plano de fundo: gradiente linear (45deg, var (gradiente-esquerdo), var (–btn-background), var (–btn-background), var (gradiente –direito));
}
seletor a: hover: before {
inserção: -3px;
}
seletor a: hover: after {
inserção: -3px;
filtro: desfoque (10px);
}
seletor um intervalo {
posição: absoluta;
topo: 0;
esquerda: 0;
width: 100%;
altura: 100%;
background: var (–btn-background);
índice z: 10;
exibição: flex;
justificar o conteúdo: centro;
alinhar-itens: centro;
overflow: hidden;
}
Agora, se você passar o mouse sobre o botão, descobrirá efeitos magníficos.
Para adicionar um efeito de vidro brilhante ao botão, também colemos o seguinte código:
/ * Efeito de vidro brilhante * /
seletor um intervalo :: antes de {
feliz: ";
posição: absoluta;
topo: 0;
esquerda: -50%;
width: 100%;
altura: 100%;
fundo: rgba (255,255,255,0.075);
transformar: inclinação (160 graus);
}
Você observa um novo efeito que traz mais luz ao botão.
Leia também: Como criar uma seção de membro da equipe com Elementor
Agora vamos copiar este botão e colá-lo na segunda coluna. Vamos mudar o alinhamento do botão para a esquerda e mudar o texto para mais.
Agora você só tem que publicar seu trabalho ou visualize-o.
Aqui estão 2 lindos botões criados.
Obtenha o Elementor Pro agora!
Conclusão
Então ! É isso para este tutorial que mostra como criar um botão com efeito hover com o construtor de página Elementor. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
