Botão Liquid Fill Plus

Botão de contorno onde um líquido sobe preenchendo de baixo pra cima no hover.

Sobre este efeito

Botão de contorno onde, no hover, um líquido sobe preenchendo de baixo pra cima. O truque é um gradiente sólido como background cujo tamanho/posição animam, sem elementos extras. CSS puro.

Ficha

Categoria: Botões
Onde combina: chamada pra ação
Alcance: Área: vive dentro de um bloco da página.
Plano: Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).
Peso: 1,3 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 6% do processador de um celular intermediário enquanto anima.
Na loja desde: 22/07/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-liquid-fill.

Assuntos

botão
cta
líquido
fill
hover