post #4526
Botão Personalizado CSS para Landing Pages em Elementor com Efeito Pulsar Sombra para Destaque
Publicado em: 26/02/2024 / Atualizado em: 28/02/2024
Se você quer criar um botão personalizado que chame a atenção do usuário para uma determinada ação (CTA), este código pode lhe ajudar.
Este código CSS abaixo, personaliza os botões CTA da página criada com Elementor, trazendo uma estética totalmente diferente.
Alem de deixar o botão com 3 tipos de cores em degradê (gradient), ele também adicione um efeito de “pulsar” no botão, que emite uma onda simples em torno do botão, trazendo mais destaque.
Segue abaixo código pronto para páginas criadas em Elementor:
.elementor-button {
/* DEGRADE AZUL COM ROXO */
--cor-de-fundo: linear-gradient(144deg,#00DDEB, #5B42F3 50%,#AF40FF);
--cor-da-sombra: 0, 159, 255;
/* VERDE
--cor-de-fundo: #69c144;
--cor-da-sombra: 105, 193, 68;
*/
/* LARANJA
--cor-de-fundo: #ff8400;
--cor-da-sombra: 255, 132, 0;
*/
}
.elementor-button {
align-items: center;
background: var(--cor-de-fundo) !important;
border: 0;
box-shadow: rgb(var(--cor-da-sombra) / 55%) 0 15px 30px -5px;
box-sizing: border-box;
color: #FFFFFF;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
cursor: pointer;
animation: pulseButton 3s infinite;
transition-duration: .3s;
transition-property: transform;
/* OPCIONAL */
border-radius: 8px;
padding: 16px 40px;
font-weight: 700;
font-size: 20px;
font-family: inhirit, arial, sans-serif;
}
.elementor-button:active,
.elementor-button:hover {
outline: 0;
}
.elementor-button:hover {
transform: scale(1.1);
transition-duration: .3s;
transition-property: transform;
}
@keyFrames pulseButton {
0% {
box-shadow: 0 0 0 0 rgba(var(--cor-da-sombra), 1);
}
50% {
box-shadow: 0 0 0 20px rgba(var(--cor-da-sombra), 0);
}
100% {
box-shadow: 0 0 0 50px rgba(var(--cor-da-sombra), 0);
}
}Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=4526
ID de Referência: 4526
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.