Botão Líquido
Cole isso no Widget HTML | leia as informações abaixo Insira o link desejado do botão entre as áspas na parte a href=”COLOQUE SEU LINK AQUI”. Se quiser que o link abra na mesma página, remova o target=”_blank”. <div class="containerBotoes"> <a href=" COLOQUE SEU LINK AQUI " target= "_blank"> <button class="botaoSuperior">APROVEITAR DESCONTO</button> <button class="botaoInferior">APROVEITAR DESCONTO</button> […]
Faixa Animada com CSS
CSS selector .elementor-widget-container{ display: flex; color: rgba(255,255,255,.82); width: max-content; background-color: rgba(255,255,255,.2); transform: translateX(-50%); } selector h2{ animation: faixaAnimada 4s infinite linear; padding-left: 10px; font-size: 24px; } @keyframes faixaAnimada{ to{ transform: translateX(100%); } } /* SE NAO QUISER QUE PARE QUANDO PASSAR O MOUSE, EXCLUA DAQUI PARA BAIXO */ selector .elementor-widget-container:hover h2{ animation-play-state: paused }
Cursor personalizado com CSS
HTML body{ cursor: url(‘link do cursor aqui’), auto; } a{ cursor: url(“link do cursor click aqui”), auto; }
Botão Ícone Animado
HTML ENVIAR CSS .botaoAnimado{ padding: 14px 24px; display: flex; gap: 8px; background: linear-gradient(130deg, blue, rgb(136, 0, 255),rgb(195, 10, 176)); background-size: 600%; border: none; border-radius: 12px; box-shadow: 0px 0px 40px rgba(206, 150, 255, 0.179), 4px 4px 6px rgba(255, 255, 255, 0.293) inset, -4px -4px 6px rgba(255, 255, 255, 0.293) inset; color: rgba(255, 255, 255, 0.831); font-size: […]
Máscara em Telefones
JavaScript <script> function mask(o,f){ v_obj=o v_fun=f setTimeout("execmask()",1) } function execmask(){ v_obj.value=v_fun(v_obj.value) } function masktel(v){ v=v.replace(/D/g,""); v=v.replace(/^(d{2})(d)/g,"($1) $2"); v=v.replace(/(d)(d{4})$/,"$1-$2"); return v; } function idcss( el ){ return document.getElementById( el ); } window.onload = function(){ idcss('form-field-telefone').setAttribute('maxlength', 14); idcss('form-field-telefone').onkeypress = function(){ mask( this, masktel ); } } </script>
Menu Fixo estilo Aplicativo
CSS .containerMenu{ background-color: #EBEAEB; } .iconePreenchido{ opacity: 0; transition: all .5s; padding: 0px 2px; border-radius: 50%; margin: 16px 18px; } .containerIcone.ativo .iconePreenchido{ background-color: #EBEAEB; opacity: 1; padding: 12px 16px; margin: 0px 2px; transition: all .3s .1s; } .containerIcone{ transition: all .3s .2s; position: relative; } .containerIcone.ativo{ transform: translateY(-32px); transition: all .3s } .tituloIcone{ opacity: 0; […]
Botão com Efeito de Reflexo
HTML CLIQUE AQUI CLIQUE AQUI CSS *{ margin: 0; } .containerPai{ width: 100%; height: 100vh; background-color: rgb(29, 29, 31); display: flex; justify-content: center; align-items: center; flex-direction: column; } .botoes{ display: flex; flex-direction: column; } button{ padding: 14px 32px; border-radius: 12px; letter-spacing: 1px; border: none; transition: all .3s; z-index: 2; cursor: pointer; border-radius: 12px; color: rgba(255, […]
Preloader HTML CSS JS
Preloader 1 (Utilizado no CodeSnippets) HTML function adicionar_preloader_html() { echo '<div id="preloader"> <img src="https://tutoriais.gustavocampelo.com.br/wp-content/uploads/2024/06/Logotipo.png" alt="Carregando…"> </div>'; } add_action('wp_body_open', 'adicionar_preloader_html'); JS function adicionar_preloader_js() { ?> <script> document.addEventListener("DOMContentLoaded", function() { document.body.classList.add("loading"); }); window.addEventListener("load", function() { document.body.classList.remove("loading"); document.body.classList.add("loaded"); document.getElementById('preloader').style.display = 'none'; }); </script> <?php } add_action('wp_footer', 'adicionar_preloader_js'); CSS #preloader { position: fixed; top: 0; left: 0; right: 0; […]
Efeitos em Botões 1#
Código CSS selector a.elementor-button{ width: 180px; height: 44px; display: flex; justify-content: center; align-items: center; overflow: hidden; transition: all .5s; } selector span.elementor-button-icon.elementor-align-icon-right{ transition: all .6s; transform: translateX( 0px); } selector:hover span.elementor-button-icon.elementor-align-icon-right{ transform: translateX( 50px); } .elementor-button-text{ transition: all .6s } selector:hover .elementor-button-text{ transform: translateX( 12px); } /* EFEITOS DE SOMBRA*/ selector:hover a.elementor-button{ box-shadow: -4px -4px […]
Efeito Pulsar com HTML e CSS
Código HTML Código CSS *{ margin: 0px; padding: 0px; } #containerPai{ background-color: #d6d6d6; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .pulsar{ width: 100px; height: 100px; background-color: blueviolet; border-radius: 50%; position: relative; & span{ width: 100%; height: 100%; background-color: inherit; position: absolute; border-radius: 50%; animation: pulsar 4s infinite; animation-delay: calc(1s * var(–span)); […]
