Seletor em Gota Plus

Seletor de tema num trilho de vidro: uma gota corre até a opção, estica com a velocidade, balança ao chegar, e o ícone debaixo dela aumenta como numa lente.

Ver na loja e baixar

Sobre este efeito

Um seletor de opções num trilho de vidro, feito pra escolher o tema do site mas que serve pra qualquer escolha de duas ou mais opções. A opção escolhida fica debaixo de uma gota de vidro. No clique, a gota corre até a nova numa mola: estica conforme a velocidade e afina na altura, como água mantendo o volume, balança ao chegar e se espreme contra a parede do trilho em vez de atravessar. O reflexo de luz dela escorrega pro lado contrário do movimento, e o ícone debaixo da gota aumenta como visto por uma lente, inflando de passagem os que ela cruza. O trilho desfoca e satura o que está atrás. Com um atributo, cada escolha escreve o tema na página pra o seu CSS trocar as cores. Rádios de verdade por baixo: setas do teclado e leitor de tela funcionam. Tom e força do vidro, cores, tamanhos, lente, quanto estica e a mola ajustáveis. CSS e JavaScript puros, sem biblioteca.

Ficha

Categoria: Botões
Onde combina: menu/navegação, utilitário
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: 5,1 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 14% do processador de um celular intermediário enquanto anima.
Na loja desde: 30/09/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-seletor-em-gota.

Assuntos

tema
modo escuro
dark mode
seletor
switch
toggle
alternador
vidro
glass
liquid glass
gota
mola