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

WordPress, Dicas e Curiosidades /

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

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