escStudio

Biblioteca de Códigos CSS

Códigos testados para Elementor — botões, hover, grids, responsivo, countdown e utilitários. Um clique para copiar.

Botão com hover suave (elevação + brilho)

Hover premium para botões: leve elevação, transição suave e brilho sutil.

HoverCSSElementor Free/Pro, qualquer tema.
css
selector .elementor-button {
  transition: all 0.25s ease;
}
selector .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  filter: brightness(1.08);
}

Botão flutuante de WhatsApp

Botão fixo no canto inferior direito com link direto para o WhatsApp.

BotõesHTMLElementor Free/Pro. Funciona em qualquer página WordPress.
html
<a href="https://wa.me/5511999999999?text=Ol%C3%A1!%20Vim%20pelo%20site"
   class="wpp-float" aria-label="Falar no WhatsApp" target="_blank" rel="noopener">
  <svg viewBox="0 0 32 32" width="30" height="30" fill="#fff"><path d="M16 3C9.4 3 4 8.4 4 15c0 2.6.8 5 2.3 7L4 29l7.2-2.2c1.9 1 4 1.6 6.3 1.6h.5c6.6 0 12-5.4 12-12S22.6 3 16 3zm5.9 16.9c-.3.8-1.5 1.5-2.4 1.7-.6.1-1.4.2-4.2-.9-3.5-1.5-5.8-5-6-5.3-.2-.2-1.4-1.9-1.4-3.6s.9-2.5 1.2-2.9c.3-.3.7-.4 1-.4h.7c.2 0 .5-.1.8.6.3.8 1 2.7 1.1 2.9.1.2.1.4 0 .7-.1.2-.2.4-.4.6l-.6.7c-.2.2-.4.4-.2.8.2.3 1 1.6 2.1 2.6 1.5 1.3 2.7 1.7 3 1.9.4.2.6.1.8-.1.2-.2 1-1.1 1.2-1.5.3-.4.5-.3.9-.2.3.1 2.2 1 2.5 1.2.4.2.6.3.7.5.1.1.1.9-.2 1.7z"/></svg>
</a>
<style>
.wpp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .2s ease;
}
.wpp-float:hover { transform: scale(1.08); }
@media (max-width: 767px) { .wpp-float { right: 14px; bottom: 14px; width: 52px; height: 52px; } }
</style>

Iframe centralizado e responsivo (16:9)

Centraliza qualquer iframe (vídeo, mapa, formulário) mantendo proporção 16:9.

IframeCSSTodos os navegadores modernos (aspect-ratio: 2021+).
css
selector .iframe-wrap {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}
selector .iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Card com hover (borda + elevação)

Realce de card ao passar o mouse: borda mais clara e leve elevação.

CardsCSSElementor Free/Pro.
css
selector {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
selector:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

Grid responsivo automático

Grid que se adapta sozinho à largura, sem media queries por coluna.

GridsCSSTodos os navegadores modernos.
css
selector .grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

Texto com destaque (marca-texto)

Efeito de marca-texto parcial atrás de palavras-chave do título.

TextoCSSElementor Free/Pro.
css
selector .destaque {
  background: linear-gradient(180deg, transparent 55%, rgba(250, 204, 21, 0.35) 55%);
  padding: 0 2px;
}

Seção sticky (fixa ao rolar)

Mantém uma coluna/seção fixa enquanto o resto da página rola.

StickyCSSElementor Pro tem opção nativa (Motion Effects → Sticky); este CSS é a alternativa Free.
css
selector {
  position: sticky;
  top: 90px; /* altura do header + folga */
  align-self: flex-start;
}

Ajustes rápidos de mobile (fonte/espaço)

Bloco base de correções mobile: reduzir título, padding e centralizar.

ResponsivoCSSElementor Free/Pro.
css
@media (max-width: 767px) {
  selector h1, selector .elementor-heading-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
    text-align: center;
  }
  selector {
    padding: 40px 20px !important;
  }
}

Esconder elemento no mobile (ou no desktop)

Oculta um elemento por breakpoint sem apagar do layout.

ResponsivoCSSElementor Free/Pro.
css
/* esconder no mobile */
@media (max-width: 767px) {
  selector { display: none !important; }
}

/* esconder no desktop */
@media (min-width: 1025px) {
  selector.so-mobile { display: none !important; }
}

Redirecionamento simples com delay

Redireciona a página após X segundos — útil em páginas de obrigado.

RedirecionamentoJSQualquer página WordPress.
js
<script>
  setTimeout(function () {
    window.location.href = "https://exemplo.com/destino";
  }, 5000); // 5000ms = 5s
</script>

Countdown para data fixa

Contagem regressiva em texto para data/hora definida, com fuso de Brasília.

CountdownJSQualquer página. Elementor Pro tem widget nativo de countdown com evergreen.
js
<div id="cd" style="font-family: inherit; font-size: 28px; font-weight: 700; letter-spacing: 1px;"></div>
<script>
  var alvo = new Date("2026-08-05T20:00:00-03:00").getTime();
  var timer = setInterval(function () {
    var d = alvo - Date.now();
    if (d <= 0) { clearInterval(timer); document.getElementById("cd").innerHTML = "Começou!"; return; }
    var dias = Math.floor(d / 864e5),
        h = Math.floor(d % 864e5 / 36e5),
        m = Math.floor(d % 36e5 / 6e4),
        s = Math.floor(d % 6e4 / 1000);
    document.getElementById("cd").innerHTML =
      dias + "d " + h + "h " + m + "m " + s + "s";
  }, 1000);
</script>

Ajuste de imagem (cobrir área sem distorcer)

Faz a imagem preencher o container cortando o excesso, sem esticar.

UtilitáriosCSSTodos os navegadores modernos.
css
selector img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* foco do corte */
}

Formulário escuro (inputs padronizados)

Estiliza inputs do Elementor Forms para tema escuro com foco visível.

FormulárioCSSElementor Pro (widget Form).
css
selector .elementor-field {
  background: #17171a;
  border: 1px solid #2f2f36;
  color: #f4f4f5;
  border-radius: 8px;
}
selector .elementor-field::placeholder { color: #63636c; }
selector .elementor-field:focus {
  border-color: #f4f4f5;
  box-shadow: none;
}
selector .elementor-message-danger { color: #f87171; }

Carrossel horizontal com scroll-snap

Carrossel leve sem JavaScript usando scroll nativo com snap.

CarrosselCSSTodos os navegadores modernos.
css
selector .snap-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
selector .snap-row > * {
  flex: 0 0 78%;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  selector .snap-row > * { flex-basis: 340px; }
}

Botão sem sombra / flat de verdade

Remove sombras, gradientes e efeitos herdados do tema para um botão 100% flat.

BotõesCSSElementor Free/Pro, qualquer tema.
css
selector .elementor-button {
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
  border: 1px solid transparent;
}
selector .elementor-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}