Botão com Efeito/Animação Hover Líquido | Design de Botões Criativos (SEM ADDON)

 

Código CSS para o efeito Hover Líquido do botão (fundo escuro):

selector{
    --text-hover-color: #000;
}
selector .elementor-button-wrapper{
    position: relative;
    transition: 0.5s;
}
selector .elementor-button-wrapper a{
    background: #fff;
    -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    color: var(--text-hover-color);

}
selector.anim .elementor-button-wrapper a{
    animation: anim2 0.7s steps(22) forwards;
}
selector.anim .elementor-button-wrapper a:hover {
    animation: anim1 0.7s steps(22) forwards;
}
selector .elementor-button-wrapper .before{
    position: absolute;
}

@keyframes anim1 {
    from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    }
    to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    }
}

@keyframes anim2 {
    from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    }
    to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    }
}

 

Código JS do Widget <html> para aplicar efeito ao botão:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var $ = jQuery
$(document).ready(function(){
    
$('.liquid-button .elementor-button-wrapper').each(function(){
    
    var btnText = $(this).find('.elementor-button-text').text().trim()
    
    $(this).children('span.before').remove()
    $(this).prepend('<span class="before elementor-button">' + btnText + '</span>')
})

$('.liquid-button').hover(function(){
    $(this).addClass('anim')
})
})

</script>

 

Código CSS para o efeito Hover Líquido do botão (fundo claro):

selector{
    --text-hover-color: #fff;
}
selector .elementor-button-wrapper{
    position: relative;
    transition: 0.5s;
}
selector .elementor-button-wrapper a{
    background: #fff;
    -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    color: var(--text-hover-color);

}
selector.anim .elementor-button-wrapper a{
    animation: anim2 0.7s steps(22) forwards;
}
selector.anim .elementor-button-wrapper a:hover {
    animation: anim1 0.7s steps(22) forwards;
}
selector .elementor-button-wrapper .before{
    position: absolute;
}

@keyframes anim1 {
    from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    }
    to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    }
}

@keyframes anim2 {
    from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    }
    to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    }
}

selector .elementor-button-wrapper,
selector .before,
selector .elementor-button-text{
    filter: invert(1);
}

 

 

Compartilhe nas redes sociais

WhatsApp
Facebook
LinkedIn
Email

Artigos relacionados

Como Criar um Site Profissional de Sucesso

Se você está em busca de criar um site profissional de sucesso que se destaque na web, você está no lugar certo. Neste artigo, compartilharemos insights valiosos para criar um site que não apenas atraia a atenção de visitantes, mas também supere a concorrência. Escolhendo a Melhor Plataforma A escolha da plataforma certa para o seu site é crucial. Recomendamos optar por uma plataforma confiável, como o WordPress. O WordPress é altamente flexível e oferece uma infinidade de recursos e temas personalizáveis, tornando-o uma escolha popular para a criação de sites profissionais. Design Impactante e Responsivo O design do seu site desempenha um papel fundamental na retenção de visitantes. Certifique-se de que o design seja atraente, profissional e responsivo. Um design responsivo garante que o seu site seja acessível em dispositivos móveis, o que é essencial nos dias de hoje. Conteúdo de Qualidade O conteúdo do seu site é o que manterá os visitantes envolvidos e retornando. Certifique-se de produzir conteúdo de alta qualidade, relevante e informativo. Isso não apenas atrairá visitantes, mas também aumentará sua classificação nos mecanismos de busca. Otimização para Motores de Busca (SEO) A otimização para motores de busca desempenha um papel crucial na classificação do seu site no Google. Certifique-se de realizar uma pesquisa de palavras-chave relevante para o seu nicho e otimize seu conteúdo de acordo com essas palavras-chave. Além disso, otimize a velocidade de carregamento do seu site, os títulos das páginas e as meta descrições para melhorar sua visibilidade nos resultados de pesquisa. Navegação Intuitiva Uma navegação intuitiva é essencial para garantir uma experiência agradável para os visitantes. Certifique-se de que o menu de navegação seja claro e fácil de usar. Isso ajudará os visitantes a encontrar o que estão procurando rapidamente. Segurança do Site A segurança do seu site é uma prioridade. Certifique-se de que o site esteja protegido contra ameaças cibernéticas, como hackers e malware. Use certificados SSL para garantir que os dados dos visitantes estejam seguros. Integração com Redes Sociais Promova o envolvimento dos visitantes integrando suas redes sociais ao seu site. Isso permite que os visitantes compartilhem seu conteúdo e interajam com sua marca em várias plataformas. Análise de Dados A análise de dados é fundamental para entender o desempenho do seu site. Use ferramentas de análise, como o Google Analytics, para acompanhar o tráfego, o comportamento dos visitantes e as conversões. Com base nesses dados, ajuste e aprimore continuamente o seu site. Conclusão Criar um site profissional de sucesso requer atenção aos detalhes e um compromisso com a qualidade. Ao escolher a plataforma certa, investir em design impactante, produzir conteúdo de qualidade e otimizar para motores de busca, você estará no caminho certo para superar a concorrência e alcançar o sucesso online. Lembre-se sempre de manter seu site atualizado e em constante evolução para atender às necessidades em constante mudança dos visitantes. Siga estas dicas e você estará bem encaminhado para criar um site profissional de sucesso que se destaca no mundo online. Para qualquer dúvida ou se estiver interessado em solicitar um orçamento para o desenvolvimento de um site, sinta-se à vontade para entrar em contato comigo. Estou à disposição para ajudar você a alcançar seus objetivos online.

Leia Mais »

10 plugins do Elementor para tornar seu site WordPress ainda mais incrível

Se você é um usuário do WordPress e do Elementor, provavelmente já sabe o quão poderosa é a combinação dessas duas ferramentas. O Elementor é um construtor de páginas incrível que permite criar layouts personalizados de forma fácil e intuitiva, enquanto o WordPress é uma plataforma de gerenciamento de conteúdo confiável e flexível. Mas sabia que existem dezenas de plugins disponíveis que podem aumentar ainda mais a funcionalidade do Elementor? Neste artigo, vamos apresentar 10 plugins do Elementor para tornar seu site WordPress ainda mais incrível. 1. JetElements O JetElements é um plugin do Elementor que adiciona vários novos widgets ao seu arsenal de construção de páginas. Com mais de 50 novos widgets, incluindo carrosséis, cronômetros regressivos, mapas, depoimentos e muito mais, o JetElements oferece uma gama incrível de possibilidades para a criação de páginas personalizadas. 2. Essential Addons for Elementor O Essential Addons for Elementor é outro plugin que adiciona vários novos widgets ao Elementor. Com mais de 70 novos widgets, incluindo ícones animados, galerias, tabelas de preços e muito mais, o Essential Addons for Elementor oferece uma ampla gama de recursos para tornar suas páginas mais dinâmicas e interativas. 3. JetEngine O JetEngine é um plugin do Elementor que adiciona recursos avançados de criação de conteúdo dinâmico ao seu site. Com o JetEngine, você pode criar listas de posts personalizadas, campos personalizados e muito mais, tudo sem escrever uma única linha de código. 4. HappyAddons O HappyAddons é outro plugin do Elementor que adiciona novos widgets ao seu arsenal. Com mais de 50 novos widgets, incluindo gráficos, animações, ícones e muito mais, o HappyAddons oferece uma ampla gama de recursos para melhorar a aparência e a funcionalidade do seu site. 5. JetTabs O JetTabs é um plugin do Elementor que permite criar abas e acordeões personalizados em suas páginas. Com o JetTabs, você pode organizar seu conteúdo de forma mais intuitiva e apresentável, melhorando a experiência do usuário. 6. Crocoblock O Crocoblock é um conjunto de plugins do Elementor que adiciona vários novos recursos ao seu arsenal. Com o Crocoblock, você pode criar formulários personalizados, postagens personalizadas, cabeçalhos e rodapés personalizados e muito mais, tudo sem escrever uma única linha de código. 7. Envato Elements O Envato Elements é um serviço de assinatura que oferece uma ampla gama de modelos, temas e plugins do Elementor para ajudá-lo a criar sites incríveis. Com uma assinatura do Envato Elements, você tem acesso a milhares de recursos do Elementor, permitindo que você crie sites profissionais sem gastar muito tempo ou dinheiro. 8. JetMenu O JetMenu é um plugin do Elementor que permite criar menus personalizados para o seu site WordPress. Com o JetMenu, você pode criar menus responsivos e personalizados, incluindo menus dropdown, megamenus e menus verticais. O JetMenu vem com vários recursos avançados, como integração com o WooCommerce, suporte para ícones personalizados e opções de estilo avançadas, para garantir que seus menus sejam exibidos da maneira mais atraente possível. Com o JetMenu, você pode criar menus personalizados que se integram perfeitamente ao seu site WordPress, melhorando a experiência do usuário e tornando mais fácil para seus visitantes encontrar o que estão procurando. 9. JetBlog O JetBlog é um plugin do Elementor que permite adicionar um blog personalizado ao seu site. Com o JetBlog, você pode criar layouts de blog personalizados, organizar seus posts de maneira mais intuitiva e adicionar vários recursos, como comentários e categorias, para melhorar a experiência do usuário. 10. PowerPack for Elementor O PowerPack for Elementor é outro plugin que adiciona vários novos widgets ao Elementor. Com mais de 70 novos widgets, incluindo botões de ação, animações de texto, galerias de imagens e muito mais, o PowerPack for Elementor oferece uma ampla gama de recursos para tornar suas páginas mais envolventes e atraentes. Com esses 10 plugins incríveis, você pode melhorar significativamente a funcionalidade do seu site WordPress e do Elementor. Com mais recursos e widgets, você pode criar páginas mais personalizadas e impressionantes, melhorando a experiência do usuário e atraindo mais visitantes para o seu site. Conclusão O Elementor é uma ferramenta poderosa por si só, mas com esses 10 plugins, você pode levar sua criação de sites para o próximo nível. Com recursos avançados de criação de conteúdo, widgets personalizados e muito mais, você pode criar páginas impressionantes e atraentes que deixarão uma impressão duradoura nos visitantes do seu site. FAQs   1. Posso usar todos esses plugins ao mesmo tempo? R: Sim, você pode usar todos esses plugins juntos sem problemas.   2. Esses plugins são gratuitos? R: Alguns desses plugins têm uma versão gratuita, mas para aproveitar todos os recursos, é necessário adquirir a versão paga.   3. É fácil de usar esses plugins? R: Sim, esses plugins são fáceis de usar e vêm com documentação detalhada para ajudar na configuração.   4. Esses plugins são compatíveis com outros temas do WordPress? R: Sim, esses plugins são compatíveis com a maioria dos temas do WordPress.   5. Existem outros plugins do Elementor que você recomenda? R: Sim, existem muitos outros plugins do Elementor disponíveis, mas esses 10 são alguns dos melhores e mais populares.  

Leia Mais »

Vantagens em ter um Site em WordPress e Elementor

Nos dias de hoje, ter um site é fundamental para qualquer empresa ou indivíduo que deseja se destacar na internet. Além de ser um meio de comunicação com o público, um site pode ser usado para vender produtos, fornecer serviços e apresentar informações importantes sobre a empresa. O WordPress é uma das plataformas mais populares do mundo para a criação de sites, e o Elementor é um dos seus construtores de páginas mais utilizados. Neste artigo, discutiremos as vantagens de usar o WordPress e o Elementor para criar um site. O que é WordPress? O WordPress é uma plataforma de gerenciamento de conteúdo que permite criar e publicar conteúdo na web. Ele é usado por mais de 40% dos sites na internet e é a plataforma mais popular para a criação de sites. O WordPress é gratuito e de código aberto, o que significa que qualquer pessoa pode usar, modificar e distribuir o software. Ele também tem uma grande comunidade de desenvolvedores que interagem com temas, plugins e recursos adicionais. O que é Elementor? Elementor é um construtor de páginas para WordPress que permite criar páginas e posts de forma visual, sem precisar escrever código. Ele é um dos construtores de páginas mais populares para WordPress e tem mais de 5 milhões de usuários ativos. O Elementor é fácil de usar e tem uma grande variedade de widgets e modelos para ajudar a criar páginas visualmente atraentes. Vantagens em usar o WordPress Fácil de usar O WordPress é fácil de usar e não requer conhecimentos avançados em programação. Com o WordPress, é possível criar um site sem precisar escrever código. Ele também tem uma interface de usuário amigável que permite gerenciar facilmente o conteúdo do site. Flexibilidade O WordPress é altamente flexível e pode ser usado para criar qualquer tipo de site. Ele é usado para criar sites de comércio eletrônico, sites de notícias, sites de blogs e muito mais. Além disso, o WordPress é altamente personalizável, o que significa que é possível criar um site que atenda às necessidades específicas da empresa. amigável para SEO O WordPress é altamente otimizado para controlar a busca, o que significa que é possível melhorar o posicionamento do site nos resultados de busca. O WordPress tem recursos embutidos de SEO, como a capacidade de adicionar títulos e meta personalizados para cada página e postagem. Grande comunidade de desenvolvedores O WordPress tem uma grande comunidade de desenvolvedores que interagem com temas, plugins e recursos adicionais. Isso significa que é possível encontrar muitos recursos gratuitos e pagos para ajudar a personalizar e melhorar o site. Vantagens em usar o Elementor Interface de usuário visual O Elementor tem uma interface de usuário visual que permite criar páginas e posts sem precisar escrever código. Ele tem uma grande variedade de widgets e modelos para ajudar a criar páginas visualmente atraentes. personalização O Elementor é altamente personalizável e permite criar páginas que atendem às necessidades específicas da empresa. Ele tem muitos recursos que permitem personalizar a aparência e o comportamento do site. Responsividade Além das vantagens mencionadas anteriormente, uma das principais razões pelas quais muitas empresas optam por criar seus sites usando o WordPress e o Elementor é a responsividade. A responsividade é a capacidade do site de se adaptar a diferentes tamanhos de tela, como em dispositivos móveis e tablets. Com o crescente número de pessoas que acessam a internet em seus dispositivos móveis, ter um site responsivo é essencial para garantir que o site seja acessível e fácil de usar para todos os usuários. O Elementor é altamente responsivo, permitindo que os usuários criem páginas que se adaptam perfeitamente a diferentes tamanhos de tela. Além disso, o WordPress também tem recursos para garantir a responsividade do site, como temas responsivos e plugins de otimização para dispositivos móveis. Ter um site responsivo não é apenas uma vantagem para os usuários, mas também para o SEO. O Google prioriza sites responsivos em seus resultados de busca, o que pode aumentar a visibilidade do site e atrair mais tráfego. Portanto, se você está pensando em criar um site para sua empresa, a responsabilidade é uma consideração importante a ser levada em conta. O WordPress e o Elementor são opções excelentes para garantir a responsividade do seu site e garantir que ele seja acessível para todos os usuários, independentemente do dispositivo que eles usam para acessá-lo. Mais vantagens em usar o WordPress e o Elementor juntos Economia de tempo Com o WordPress e o Elementor juntos, é possível economizar tempo na criação de um site. O Elementor permite criar páginas visualmente atraentes em pouco tempo, e o WordPress tem recursos que permitem gerenciar facilmente o conteúdo do site. atualizações regulares O WordPress e o Elementor têm atualizações regulares para corrigir bugs e melhorar o desempenho. Isso significa que o site sempre estará atualizado e funcionando corretamente. Compatibilidade O Elementor é compatível com a maioria dos temas do WordPress e com muitos plugins. Isso significa que é possível criar um site personalizado usando o tema e os plugins que atendem às necessidades específicas da empresa. Gerenciamento de conteúdo Com o WordPress, é fácil gerenciar o conteúdo do site, como páginas, postagens e mídia. O Elementor permite criar páginas visualmente atraentes, e o WordPress permite gerenciar facilmente o conteúdo do site. Conclusão O WordPress e o Elementor são ferramentas poderosas para a criação de um site. Eles são fáceis de usar, altamente personalizáveis ​​e têm muitos recursos para ajudar a criar um site visualmente atraente e funcional. Com o WordPress e o Elementor juntos, é possível economizar tempo, personalizar o site e gerenciar facilmente o conteúdo. Se você está pensando em criar um site, o WordPress e o Elementor são definitivamente duas plataformas que você deve considerar.   perguntas frequentes   1. É necessário saber programação para usar o WordPress e o Elementor? Não, não é necessário saber programação para usar o WordPress e o Elementor. Ambos têm interfaces amigáveis ​​que permitem criar um site visualmente atraente sem precisar escrever código.

Leia Mais »
Posts Recentes