Botão de Vidro Líquido Ultra

Botão de vidro grosso: a borda curva o fundo como lente, um brilho segue o cursor e o aperto amassa como gelatina.

Sobre este efeito

Botões de vidro grosso por cima do seu fundo, no estilo do vidro líquido dos sistemas novos. A borda funciona como lente e curva a foto, o vídeo ou o texto que está atrás; um brilho segue o cursor; e no aperto o botão amassa e volta balançando numa mola de verdade. Serve em botão e link, em pílula, retângulo arredondado ou redondo só com ícone. A refração aparece no Chrome, Edge e derivados; no Safari e no Firefox o botão fica de vidro fosco, com o mesmo brilho e a mesma gelatina. Força da lente, tinta, cantos e altura ajustáveis. Sem biblioteca externa.

Ficha

Categoria: Botões
Onde combina: chamada pra ação, topo (hero)
Alcance: Área: vive dentro de um bloco da página.
Plano: Exclusivo do Ultra (R$ 39,90/mês) até 01/11/2026; depois entra no Plus.
Peso: 5,5 KB de código comprimido. Sem biblioteca externa.
No celular: Moderado: usa 21% do processador de um celular intermediário enquanto anima.
Na loja desde: 01/10/2026

Como colocar no seu site

Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-botao-vidro-liquido.

Assuntos

vidro
glass
liquid glass
vidro líquido
botão
button
refração
lente
gelatina
jelly
glassmorphism