Botões
Botão Degradê Animado
selector .elementor-button{ animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite normal none running textura; background-image: linear-gradient(45deg, rgb(176, 42, 41), rgb(120, 13, 12), rgb(176, 42, 41), rgb(120, 13, 12)); background-size: 400% 200%; transition: background 1.6s cubic-bezier(0.55, 0.1, 0.47, 0.94) 0s; } @keyframes textura{ 0% { background-position: 0 0; } 100% { background-position: 100% 0; } }
BOTÃO DEGRADÊ
Botão com Icône no Final
selector .elementor-button{ padding: 0.7rem .8em 0.7rem 1.8rem !important; border-radius: 9.375rem !important; background: linear-gradient(92deg, #3CCFFE -3.01%, #152B74 95.31%) !important; /*Gradiente do BG*/ } selector .elementor-button-text{ /*Centralizar o texto*/ position: relative; top: 6px; } selector .elementor-button-icon{ /*Tamanho do ícone*/ font-size: 25px !important; vertical-align: middle; }
QUERO ME INSCREVER
Coloque um botão aqui
Contêiner
Borda com Brilho Central
selector { border: 2px solid; border-image:linear-gradient(90deg,#f2298200,#E5671B,#f2298200)1; border-left:0px; border-bottom:0px; border-right:0px; }
Efeito de Vidro
selector { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
Efeito Flutuante
selector { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0%, 100%{ transform: translate(0, 0px); } 50%{ transform: translate(0, 20px); } }
Texto
Texto com Degrâde
.texto-degrade{ background: linear-gradient(to right, #37BB5D 0%, #29A34C 50%, #177E34 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
CSS
Aqui ficará seu texto
Observação: Copiar o código abaixo que será o seu texto no widget.
<span class="texto-degrade">Aqui ficará o seu texto</span>
Código SPAN do Título
Texto com uma Cor
.cor{ background: #F8681A; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 500; }
CSS
Aqui ficará o seu texto
Observação: Copiar o código abaixo que será o seu texto no widget.
<span class="cor">Aqui ficará o seu texto</span>
Código SPAN do Título
Background em Texto
.fundo { background:#fff; background-color:#000; border-radius:12px; padding:4px 10px; }
CSS
Aqui ficará o seu texto
Observação: Copiar o código abaixo que será o seu texto no widget.
<span class="fundo">Aqui ficará o seu texto</span>
Código SPAN do Título
Efeito Marqueê
Observação: Dentro do contêiner, adicionar em "Atributos" a seguinte frase:
data-marquee|SEU TEXTO AQUI • SEU TEXTO AQUI • SEU TEXTO AQUI
CSS
@-webkit-keyframes marquee { 100% { transform: translateX(-100%); } } @keyframes marquee { 100% { transform: translateX(-100%); } } [data-marquee] { --loop-duration: 60s; display: block; } [data-marquee] [data-marquee-shadow] { position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap; } [data-marquee] [data-marquee-overflow] { overflow: hidden; transform: translate3d(0, 0, 0); } [data-marquee] [data-marquee-container] { display: flex; -webkit-animation: marquee var(--loop-duration) linear infinite; animation: marquee var(--loop-duration) linear infinite; } [data-marquee] [data-marquee-style] { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } [data-marquee-style] { padding: 1em 0.3em; display: flex; color: #FFFFFF; font-size: 1.3em; font-family: Sora; font-weight: 500; letter-spacing: 0.1em; }
Observação: Adicionar esse CSS no CSS Personalizado do widget HTML
HTML
const getMarqueeNode = content => { const el = document.createElement('div'); el.setAttribute('data-marquee-style', true); el.textContent = content return el; } class Marquee { constructor(el){ this.el = el; this.content = el.getAttribute('data-marquee') this.render(); } render(){ const shadow = getMarqueeNode(this.content); shadow.setAttribute('data-marquee-shadow', true); this.el.innerHTML = ""; this.el.appendChild(shadow); const inView = this.calculateItemsInView(shadow); const overflow = document.createElement('div'); overflow.setAttribute('data-marquee-overflow', true); const content = document.createElement('div'); content.setAttribute('data-marquee-container', true); overflow.appendChild(content); const count = inView * 3; for( var i = 0; i new Marquee(node) ); window.addEventListener( 'resize', () => refs.map( r => r.render() ) );
Observação: Adicionar o HTML dentro de um contêiner largura total
