Uma biblioteca para cada peça pequena

Botões, alternadores, painéis laterais, carregadores, formulários, cartões e microanimações: escolha, aperte «Inserir» e a peça entra na sua página. Zero créditos, sai com um clique.

1.350 cartões próprios prontos · 5.239 elementos abertos de quinze bibliotecas

Buscar na bibliotecaEstilo

Cada cartão está vivo: a prévia roda o mesmo código que o construtor insere, em um ambiente isolado.

Barra de abas líquidaA aba ativa não desliza pela barra, ela a derrete: a gota se solta da barra e volta a se fundir com elapreenchidocontornosuavevidroneon

Impressora de reciboO pagamento não termina com um visto: o botão vira uma linha de status e um recibo de papel sai da fenda logo abaixopreenchidocontornosuavevidroneon

Botão de compartilhar que se transformaO próprio botão se estica em uma fileira de logos de redes, uma bolha sob o cursor nomeia a escolha e um toque a dobra em uma confirmaçãopreenchidocontornosuavevidroneon

Grade cinéticaOs pontos se afastam diante do cursor: no centro afundam, na borda acende um anel e os pontos distantes ficam paradospreenchidocontornosuavevidroneon

Órbita de telasAs telas percorrem um anel 3D e sempre olham para o espectador; o anel gira e se inclina em direção ao cursorpreenchidocontornosuavevidroneon

Transformação de palavraA palavra antiga derrete e se reúne na nova, e abaixo os mesmos blocos se reorganizam no layout do que ela nomeiapreenchidocontornosuavevidroneon

Chave como no celularUm trilho macio e um botão com sombra que se estica enquanto pressionado e volta com molapreenchidocontornosuavevidroneon

Chave de sol e luaDentro do botão o sol vira lua enquanto o trilho acendepreenchidocontornosuavevidroneon

Chave com legenda de estadoA palavra ao lado muda junto com o estado e sobe deslizando em vez de piscarpreenchidocontornosuavevidroneon

Chave de três posiçõesUm trilho com três posições e um botão que viaja até a escolhidapreenchidocontornosuavevidroneon

Chave com carregamentoAo ligar, um anel dá uma volta em torno do botão enquanto a configuração é salvapreenchidocontornosuavevidroneon

Chave grandeUm trilho grande para o dedo e uma legenda bem visível, para configurações no celularpreenchidocontornosuavevidroneon

Chave com texto dentroAs palavras liga e desliga ficam dentro do trilho e mudam junto com o botãopreenchidocontornosuavevidroneon

Chave quadradaCantos retos e um percurso curto, para painéis técnicos montados em gradepreenchidocontornosuavevidroneon

Lista de configurações com chavesTrês linhas, cada uma com sua legenda e sua chave, separadas por um fiopreenchidocontornosuavevidroneon

Chave de consentimentoUma linha de aceite cujo link sublinhado dos termos é clicável à parte da chavepreenchidocontornosuavevidroneon

Botão fantasmaEm repouso só o rótulo e uma seta; a base sobe ao passar o cursor e no foco do tecladopreenchidocontornosuavevidroneon

Botão com preenchimento que avançaAo passar o cursor o preenchimento avança da esquerda e a seta sai atrás delepreenchidocontornosuavevidroneon

Botão divididoA ação principal à esquerda e, à direita, uma seta que abre as ações vizinhaspreenchidocontornosuavevidroneon

Copiar com troca de rótuloAo lado se vê o que será copiado, e o rótulo sobe para «copiado»preenchidocontornosuavevidroneon

Baixar com barra de progressoUma barra corre pela borda de baixo, o ícone gira e depois a marca se acomodapreenchidocontornosuavevidroneon

Botão de compartilharTrês formas de compartilhar ficam apagadas ao lado e se abrem ao passar o cursorpreenchidocontornosuavevidroneon

Botões voltar e avançarUm botão discreto de voltar e um principal de avançar, com o número da etapa entre elespreenchidocontornosuavevidroneon

Voltar ao topo com anelUm botão redondo com anel de leitura e uma seta que pula ao passar o cursorpreenchidocontornosuavevidroneon

Botão flutuante com dicaUm botão de ação redondo cuja dica sai ao passar o cursor e no foco do tecladopreenchidocontornosuavevidroneon

Botão com anel em degradêA borda é feita de tons da cor da marca e corre devagar pelo contornopreenchidocontornosuavevidroneon

Botão com reflexoUm reflexo inclinado passa uma vez ao passar o cursor e no foco do tecladopreenchidocontornosuavevidroneon

Botão com onda ao pressionarDo centro sai um círculo ao pressionar e ele se apaga devagar, sem uma linha de scriptpreenchidocontornosuavevidroneon

Botão cujo ícone vira marcaO mais gira e vira um anel de espera, e quando tudo é salvo a marca se desenhapreenchidocontornosuavevidroneon

Segure para confirmarO preenchimento cresce enquanto o dedo está no lugar e soltar cancela tudopreenchidocontornosuavevidroneon

Deslize para confirmarO botão é puxado para a direita com o preenchimento atrás, então um toque acidental não confirmapreenchidocontornosuavevidroneon

Botão com contadorO número fica no canto do botão e pula um pouco ao passar o cursorpreenchidocontornosuavevidroneon

Seguir com estado «seguindo»O nome fica no lugar, o estado muda e o rótulo sobe com uma marcapreenchidocontornosuavevidroneon

Voto para cima e para baixoDuas setas em volta do placar; a pressionada acende e dá um pulopreenchidocontornosuavevidroneon

Avaliação em estrelas com palavraCinco estrelas se enchem de cor e embaixo aparece a palavra da nota escolhidapreenchidocontornosuavevidroneon

Contador de quantidadeMenos e mais nas pontas e o número no meio em dígitos de largura fixapreenchidocontornosuavevidroneon

Troca entre lista e gradeLista ou grade: o destaque desliza sob o ícone escolhidopreenchidocontornosuavevidroneon

Sanduíche que vira xisTrês barras se juntam em um xis: a do meio some e as de fora giram uma para a outrapreenchidocontornosuavevidroneon

AuroraTrês fitas de luz cruzam a parte de cima e embaixo fica um céu escuro com estrelaspreenchidocontornosuavevidroneon

Chuva de meteorosOito faíscas com rastro caem na diagonal pelo quadro, cada uma na sua vezpreenchidocontornosuavevidroneon

Grade retrôUma grade vai até o horizonte e corre até você, com um sol listrado acimapreenchidocontornosuavevidroneon

Grade de pontosUma grade regular de pontos e uma poça de luz que segue o cursorpreenchidocontornosuavevidroneon

Raios de luzCinco feixes estreitos saem de um ponto no alto e balançam de levepreenchidocontornosuavevidroneon

Névoa coloridaQuatro manchas de cor flutuam e mudam de forma, com tons que se abrem a partir do da marcapreenchidocontornosuavevidroneon

Véu de grãoGrão de verdade sobre uma camada de cor: filme, não plásticopreenchidocontornosuavevidroneon

Anel de brilhoDois anéis finos giram em sentidos opostos ao redor de um halo que respirapreenchidocontornosuavevidroneon

Onda em movimentoTrês ondas correm em velocidades diferentes e somam água vivapreenchidocontornosuavevidroneon

Ondas ao pressionarOs círculos se abrem sozinhos e saem três vezes mais rápido ao pressionarpreenchidocontornosuavevidroneon

Borda brilhanteUm feixe corre pela moldura do bloco e por dentro tudo segue calmopreenchidocontornosuavevidroneon

Degradê de malhaDoze células de cor se misturam em um único fundo que escorrepreenchidocontornosuavevidroneon

Título em degradêPelas letras corre sem parar um degradê feito com as cores da páginapreenchidocontornosuavevidroneon

Brilho no textoA cada poucos segundos uma faixa clara atravessa as letraspreenchidocontornosuavevidroneon

Máquina de escreverA linha se digita letra a letra, apaga de volta e o cursor piscapreenchidocontornosuavevidroneon

Palavra que trocaA última palavra do título troca pela seguinte e o resto fica paradopreenchidocontornosuavevidroneon

Falha digitalA palavra se rasga em camadas de cor e volta a se juntarpreenchidocontornosuavevidroneon

Texto em contornoAs letras são desenhadas em contorno e o preenchimento avança pela esquerdacontornosuavevidroneon

Letreiro de neonO tubo queima, pisca de vez em quando e traz o próprio fundo escuropreenchidosuavevidroneon

Título com destaqueAtrás de uma palavra se desenrola uma faixa colorida, como traço de marca-textopreenchidocontornosuavevidroneon

Sublinhado de pincelSob a palavra se desenha uma linha irregular, como feita a pincelpreenchidocontornosuavevidroneon

Citação com luzUma citação grande com uma poça de luz que acende devagar atrás da aspacontornosuavevidroneon

Números que contamTrês números com rótulos e, sob cada um, acende o seu próprio traçopreenchidocontornosuavevidroneon

Painel de dígitosSeis tambores giram até o seu dígito, cada um um tempo depois do vizinhopreenchidosuavevidroneon

Barra de conquistaA barra chega até a sua marca e um brilho a percorre sem pararpreenchidocontornosuavevidroneon

Anéis de progressoTrês anéis se desenham até a sua fatia e escrevem o número no centropreenchidocontornosuavevidroneon

Painel à esquerdaA navegação entra pela borda esquerda sobre um escurecimento; o mesmo botão fechapreenchidocontornosuavevidroneon

Painel à direitaOs detalhes da linha abrem em um painel à direita e a lista fica no lugarpreenchidocontornosuavevidroneon

Painel superiorUm painel desce da borda de cima: um aviso, a busca ou ações rápidaspreenchidocontornosuavevidroneon

Painel inferior em degrausUm painel com alça para na metade da tela, e um botão o leva à altura totalpreenchidocontornosuavevidroneon

Painel do carrinhoO carrinho entra pela direita com os itens, o total e um botão de finalizarpreenchidocontornosuavevidroneon

Painel de filtrosOs filtros vão para um painel: caixas de seleção, faixa de preço e a contagem de resultados embaixopreenchidocontornosuavevidroneon

Painel de configuraçõesAs configurações da seção em um painel à direita: chaves com rótulo e uma lista suspensapreenchidocontornosuavevidroneon

Menu do celularUm menu de altura total com itens grandes e uma seção aninhada que abre no lugarpreenchidocontornosuavevidroneon

Lista de açõesUma lista de ações sobe de baixo com uma linha perigosa separada e um botão de cancelarpreenchidocontornosuavevidroneon

Busca em tela cheiaA busca ocupa a tela inteira: um campo, as consultas recentes e uma dica de tecladopreenchidocontornosuavevidroneon

Lightbox de imagemA foto abre por cima da página com legenda, contador e uma fita de miniaturaspreenchidocontornosuavevidroneon

Sobreposição de carregamentoA seção fica coberta por um véu com anel e legenda até os dados chegarempreenchidocontornosuavevidroneon

Janela de confirmaçãoPergunta antes do irreversível: o que exatamente se perde, o que vem depois e dois botõespreenchidocontornosuavevidroneon

Janela com etapasUm assistente na janela: a barra de etapas em cima, uma pergunta por tela, voltar e avançarpreenchidocontornosuavevidroneon

Janela com formulárioUm formulário curto na janela: dois campos, um aceite e um botão, com a página preservada embaixopreenchidocontornosuavevidroneon

Janela em tela cheiaA janela ocupa a tela inteira: cabeçalho próprio, conteúdo longo e um botão de salvar embaixopreenchidocontornosuavevidroneon

Janela com imagem lateralÀ esquerda a imagem e uma ideia, à direita o texto e um botão; no celular a imagem vai para cimapreenchidocontornosuavevidroneon

Central de notificaçõesUm painel sob o sino: os não lidos com ponto, os horários e um botão para marcar tudopreenchidocontornosuavevidroneon

Painel de ajudaUma ajuda flutuante: busca nos artigos, três respostas e uma linha de suporte ao vivopreenchidocontornosuavevidroneon

Painel do perfilUm painel sob o avatar: nome, e-mail, plano e um menu curto com a saída embaixopreenchidocontornosuavevidroneon

Painel de históricoUma lista de versões com a atual marcada: quando, quem e o que mudou, com restaurar em cada umapreenchidocontornosuavevidroneon

Menu de contexto da linhaUm botão de três pontos abre o menu de ações da linha por cima da listapreenchidocontornosuavevidroneon

Menu com seçõesUm menu suspenso com grupos nomeados, atalhos de teclado e uma linha separada embaixopreenchidocontornosuavevidroneon

Prévia ao passar o cursorPasse o cursor pelo nome: sobe o cartão do autor; o botão ao lado fixa o cartão para quem não tem mousepreenchidocontornosuavevidroneon

Dica nos quatro ladosUma dica em quatro posições: em cima, à direita, embaixo e à esquerda, cada uma com sua pontapreenchidocontornosuavevidroneon

Dica com títuloUm círculo com ponto de interrogação abre uma dica com título, um parágrafo e um linkpreenchidocontornosuavevidroneon

Pilha de avisosTrês avisos no canto: sucesso, alerta e comum; o xis remove o seupreenchidocontornosuavevidroneon

Barra com desfazerUma barra embaixo conta o que foi feito, oferece desfazer e some junto com uma faixa de tempopreenchidocontornosuavevidroneon

Janela de consentimentoUma janela de cookies no canto: o que é coletado, o link da política e dois botões de escolha iguaispreenchidocontornosuavevidroneon

Convite para assinarUma janela com faixa ilustrada, a promessa de uma carta por mês, o campo de e-mail e um xispreenchidocontornosuavevidroneon

Feixe na molduraUm trecho luminoso corre pela borda do cartão sem pararpreenchidocontornosuavevidroneon

Cartão com foco de luzUma poça de luz suave segue o mouse pelo cartãopreenchidocontornosuavevidroneon

Cartão inclinadoO cartão gira atrás do mouse, como uma placa de verdadepreenchidocontornosuavevidroneon

Cartão de neonO tubo de neon da borda respira e as letras brilham como um letreirocontornosuavevidroneon

Vidro com auroraAtrás do vidro fosco, manchas coloridas flutuam devagarcontornosuavevidroneon

Baralho em lequeTrês cartões ficam empilhados e se abrem em leque ao passar o cursorpreenchidocontornosuavevidroneon

Cartão com cortinaO painel de baixo sobe e revela o texto que está sob a capapreenchidocontornosuavevidroneon

Produto com brilhoPelo cartão de produto passa sozinha uma faixa de luzpreenchidocontornosuavevidroneon

Depoimento com aspa luminosaUma aspa enorme arde atrás do texto e acende devagarpreenchidocontornosuavevidroneon

Mural de depoimentosOs depoimentos correm em uma fita sem fim e as bordas se dissolvem no fundocontornosuavevidroneon

Botão com anel de luzUm anel de luz gira ao redor do botão e uma onda se espalha vez após vezpreenchidocontornosuavevidroneon

Botão líquidoDentro balança uma gota que, ao passar o cursor, inunda o botão inteiropreenchidocontornosuavevidroneon

Botão magnéticoO botão se inclina na direção do cursor, como se estivesse imantadopreenchidocontornosuavevidroneon

Botão com feixe na bordaDois trechos claros se perseguem pela borda do botãocontornosuavevidroneon

Botão com faíscasAo redor do botão saltam faíscas e, ao passar o cursor, elas aumentampreenchidocontornosuavevidroneon

Botão que troca de rótuloAo passar o cursor o rótulo sobe e por baixo chega o segundopreenchidocontornosuavevidroneon

Botão grande com luz à derivaPelo botão largo passa devagar um degradê e embaixo fica uma sombra coloridapreenchidocontornosuavevidroneon

Barra de íconesUma faixa de ícones: o que está sob o cursor cresce e os vizinhos sobem um poucopreenchidocontornosuavevidroneon

Órbita de pessoasDois anéis de rostos giram devagar ao redor de um sinal no centropreenchidocontornosuavevidroneon

Fita de logosAs marcas dos clientes correm em laço e as bordas da fita somem no fundocontornosuavevidroneon

Bento com luzUma grade de blocos desiguais por onde viaja uma única poça de luzpreenchidocontornosuavevidroneon

Planos com luzTrês planos; pelo do meio corre a luz e ele fica mais altopreenchidocontornosuavevidroneon

Faixa de conquistasQuatro números contam a partir do zero quando a faixa entra no quadropreenchidocontornosuavevidroneon

Etapas com feixeTrês etapas ligadas por um fio pelo qual corre uma faíscapreenchidocontornosuavevidroneon

Chamado finalUm bloco largo em uma moldura luminosa e, atrás do texto, respira uma grade de pontospreenchidocontornosuavevidroneon

Onda de pontosCinco pontos sobem e descem em onda, um depois do outropreenchidocontornosuavevidroneon

Anel que pulsaO núcleo fica parado e dele saem dois anéis, um de cada vezpreenchidocontornosuavevidroneon

Barra de carregamentoDois trechos correm pelo trilho enquanto o tempo de espera ainda é desconhecidopreenchidocontornosuavevidroneon

Esqueleto de cartãoEspaço para capa, título, duas linhas e botão, com um brilho passando por cimapreenchidocontornosuavevidroneon

Esqueleto de tabelaUm cabeçalho e quatro linhas de três células, cada linha clareando na sua vezpreenchidocontornosuavevidroneon

Indicador em segmentosDoze tracinhos em círculo se apagam na sua vez, como na espera do sistemapreenchidocontornosuavevidroneon

Quadrados que quicamQuatro quadrados pulam na sua vez e se achatam um pouco ao cairpreenchidocontornosuavevidroneon

AmpulhetaA areia passa de cima para baixo e recomeça quando o topo esvaziapreenchidocontornosuavevidroneon

Cometa em órbitaUm ponto percorre o anel e arrasta atrás de si um rastro que se apagapreenchidocontornosuavevidroneon

Bloco com brilhoUm marcador de qualquer tamanho por onde atravessa uma faixa de luzpreenchidocontornosuavevidroneon

Ponto «online»Um ponto com um anel que se abre e uma legenda: dá para ver que a conexão está vivapreenchidocontornosuavevidroneon

Batimento cardíacoUm coração bate enquanto o traçado se desenha sobre uma linha guia clarapreenchidocontornosuavevidroneon

Número que contaO número sobe e conta até o total quando entra no quadropreenchidocontornosuavevidroneon

Barra com porcentagemUm rótulo, uma porcentagem e um trilho: o preenchimento cresce da esquerda até o seu valorpreenchidocontornosuavevidroneon

Anel com porcentagemUm arco vai até o seu valor e o número fica parado no centropreenchidocontornosuavevidroneon

Pontos de etapaCinco pontos em um fio: os feitos estão preenchidos e o atual é maior e respira um anelpreenchidocontornosuavevidroneon

Contagem regressiva em dígitosHoras, minutos e segundos até o prazo; os dois-pontos piscam e os dígitos correm sozinhospreenchidocontornosuavevidroneon

Medidor de forçaQuatro trechos se preenchem um após o outro e dizem o nível em uma palavrapreenchidocontornosuavevidroneon

SincronizaçãoDuas setas giram em círculo enquanto as mudanças viajam para o servidorpreenchidocontornosuavevidroneon

GravandoUm ponto piscando, a palavra «gravando» e o tempo desde o início da tomadapreenchidocontornosuavevidroneon

Marca que se desenhaO círculo se desenha em um traço e logo depois a marca se risca sozinhapreenchidocontornosuavevidroneon

Xis que se desenhaO círculo se desenha e em seguida o xis é riscado com dois traços seguidospreenchidocontornosuavevidroneon

Coração com faíscasO coração incha por um instante e dele saem seis faíscaspreenchidocontornosuavevidroneon

Estrela que se preencheO contorno da estrela se preenche de baixo para cima e no fim dá um pulinhopreenchidocontornosuavevidroneon

Sino que balançaUm sino com contador balança e se acalma, depois faz tudo de novopreenchidocontornosuavevidroneon

Seta que pulaUm rótulo e uma seta para baixo que pula de leve e convida a rolarpreenchidocontornosuavevidroneon

Cursor de digitaçãoA linha aparece aos pedaços, como se digitada, e no fim o cursor piscapreenchidocontornosuavevidroneon

Sublinhado de pincelSob uma única palavra se desenha sozinha uma linha irregular de pincelpreenchidocontornosuavevidroneon

Ícone que viraO bloco vira ao passar o cursor e pelo teclado: o link se transforma em marcapreenchidocontornosuavevidroneon

Estouro de confeteDa marca saem dez papeizinhos em leque que somem no caminhopreenchidocontornosuavevidroneon

EntrarE-mail, senha com olho, «lembrar de mim» e um link por e-mail como segundo caminhopreenchidocontornosuavevidroneon

Criar contaNome, e-mail, senha com medidor de força ao vivo e um veredito, aceite dos termospreenchidocontornosuavevidroneon

Redefinir senhaUm campo de e-mail, um botão e o caminho de volta; o envelope balança ao passar o cursorpreenchidocontornosuavevidroneon

Código de confirmaçãoSeis casas com avanço automático, colar funciona e o botão acende com o código completopreenchidocontornosuavevidroneon

Entrada por linkSó o e-mail e um botão; uma faísca corre pelo botão ao passar o cursorpreenchidocontornosuavevidroneon

Entrada em duas colunasÀ esquerda um painel com citação e degradê vivo, à direita o formulário com senhapreenchidocontornosuavevidroneon

Página 404Um número gigante flutua e respira, embaixo o caminho de volta e uma buscapreenchidocontornosuavevidroneon

Algo quebrouTela de erro com um botão «Tentar de novo» que gira de verdade e presta contaspreenchidocontornosuavevidroneon

Em breveUma contagem regressiva ao vivo em quatro blocos e um campo «avise quando abrir»preenchidocontornosuavevidroneon

ManutençãoDuas engrenagens giram uma contra a outra, um prazo e um link para o statuspreenchidocontornosuavevidroneon

Barra de cookiesUma barra embaixo com dois botões honestos; fecha com suavidadepreenchidocontornosuavevidroneon

Formulário de contatoNome, e-mail, assunto e uma mensagem com contador de caracteres; o botão promete um prazo de respostapreenchidocontornosuavevidroneon

Lista de esperaE-mail, seu lugar na fila e uma pilha de avatares de quem já entroupreenchidocontornosuavevidroneon

Acesso pagoO texto some na névoa e por cima ficam um cadeado e o preço; ao passar o cursor a névoa sobe um poucopreenchidocontornosuavevidroneon

Primeiros passosLista do primeiro dia com barra de progresso; as marcas quem coloca é vocêpreenchidocontornosuavevidroneon

BotãoUm botão com leve elevação ao passar o mouse e estado pressionadopreenchidocontornosuavevidroneon

Botão com setaA seta desliza para a direita ao passar o mousepreenchidocontornosuavevidroneon

Botão de íconeUm botão redondo com ícone que gira um pouco ao passar o mousepreenchidocontornosuavevidroneon

Chave liga-desligaUma chave com botão elástico, teclado e aria-checkedpreenchidocontornosuavevidroneon

Caixa de seleçãoO sinal de marcado se desenha sozinho ao marcarpreenchidocontornosuavevidroneon

Grupo de opçõesTrês opções, o ponto de seleção entra com molapreenchidocontornosuavevidroneon

Controle segmentadoO destaque desliza até o segmento escolhidopreenchidocontornosuavevidroneon

Chips de filtroUma fileira de chips, o escolhido destacado, o mouse elevapreenchidocontornosuavevidroneon

Campo com rótulo flutuanteO rótulo sobe ao digitar e a borda acende na cor do sitecontornosuavevidroneon

Barra de buscaUm campo com lupa e dica de tecladocontornosuavevidroneon

Caixa de mensagem com contadorUm campo de várias linhas cuja borda acende no fococontornosuavevidroneon

Lista suspensaUm select nativo com seta e borda própriascontornosuavevidroneon

Controle deslizante com valorUma trilha preenchida e um número que segue o controlepreenchidocontornosuavevidroneon

Assinatura em uma linhaUm campo e um botão em uma cápsulapreenchidocontornosuavevidroneon

AbasO sublinhado desliza até a aba ativa, as setas trocampreenchidocontornosuavevidroneon

Trilha de navegaçãoUm caminho pelas seções com separadores e a página atualcontornosuavevidroneon

PaginaçãoNúmeros de página com a ativa e setaspreenchidocontornosuavevidroneon

Etapas de progressoTrês etapas, as feitas marcadas, a atual destacadapreenchidocontornosuavevidroneon

Menu em pílulasUm menu horizontal com o item ativo em uma pílulapreenchidocontornosuavevidroneon

Menu suspensoUm botão abre uma lista; clique fora e Esc fechampreenchidocontornosuavevidroneon

Botão com brilhoUma faixa de luz atravessa o botão ao passar o cursorpreenchidocontornosuavevidroneon

Botão com borda em degradêUma borda em degradê gira ao redor do botão e acelera ao passar o cursorcontornosuavevidroneon

Botão com carregamentoO clique mostra um giro, depois uma marca «Pronto» e então voltapreenchidocontornosuavevidroneon

Grupo de botõesTrês botões em um bloco só, o ativo se destacapreenchidocontornosuavevidroneon

Botão de ação flutuanteUm círculo com mais; ao passar o cursor sai um rótulo e o mais girapreenchidocontornosuavevidroneon

Botão de curtirO coração se preenche e pula no clique, com o contador ao ladopreenchidocontornosuavevidroneon

Chave com rótulosDentro do trilho ficam as palavras sim e não, e o botão atravessa com molapreenchidocontornosuavevidroneon

Cartão com caixa de marcaçãoO cartão inteiro é a caixa: a borda acende e a marca se desenhapreenchidocontornosuavevidroneon

Cartões de opçãoTrês formas de entrega, uma escolhida; o ponto de seleção vai para a ativapreenchidocontornosuavevidroneon

Amostras de corCírculos de cor da paleta do site; o escolhido ganha anel e fica um pouco maiorpreenchidocontornosuavevidroneon

Escolha de tamanhoQuadrados P, M, G, GG; um está indisponível e riscadopreenchidocontornosuavevidroneon

Troca de temaO sol vai embora, a lua chega; o trilho escurecepreenchidocontornosuavevidroneon

Troca de visualizaçãoLista, grade, mapa: o fundo desliza sob o ícone escolhidopreenchidocontornosuavevidroneon

Botão em relevoO botão fica sobre uma base e afunda no cliquepreenchidocontornosuavevidroneon

Botão com pulsoDo botão saem anéis como de um sinal e param ao passar o cursorpreenchidocontornosuavevidroneon

Campo com íconeO ícone de busca à esquerda acende junto com a borda no fococontornosuavevidroneon

Campo de senhaO olho mostra e esconde a senha, e fica riscado enquanto ela aparececontornosuavevidroneon

Casas do códigoQuatro casas, o cursor avança sozinho e o colar distribui os dígitoscontornosuavevidroneon

Área para soltar arquivosUma área pontilhada com uma nuvem que sobe ao passar o cursorcontornosuavevidroneon

Campo com etiquetasEtiquetas com xis dentro do campo; o xis remove a etiqueta encolhendocontornosuavevidroneon

Lista com busca ao vivoVocê digita e a lista encolhe; o resultado vazio diz isso com honestidadecontornosuavevidroneon

Área de texto com contadorO contador de caracteres fica no canto e avisa perto do limitecontornosuavevidroneon

Escala de 0 a 10Onze casas de nota; a escolhida e todas à esquerda dela se preenchempreenchidocontornosuavevidroneon

Dias da semanaSete círculos de marcação; os escolhidos se preenchem com molapreenchidocontornosuavevidroneon

Campos com prefixoUm endereço com https:// e um valor com moeda; o prefixo faz parte da molduracontornosuavevidroneon

Campo com validaçãoE-mail: aparece uma marca quando o endereço parece real e um xis quando nãocontornosuavevidroneon

Cabeçalho do siteLogo, links, um botão e um menu sanduíche que abre em telas estreitaspreenchidocontornosuavevidroneon

MegamenuO item «Produto» abre um painel de três colunas ao passar o cursor e ao focarpreenchidocontornosuavevidroneon

Menu lateralItens com ícones, o ativo com uma barra à esquerda e um contador na caixa de entradapreenchidocontornosuavevidroneon

Abas inferioresQuatro abas como em um aplicativo; a ativa levanta o ícone e mostra o rótulopreenchidocontornosuavevidroneon

Sumário da página«Nesta página»: lista de âncoras, a ativa marcada e um empurrão ao passar o cursorpreenchidocontornosuavevidroneon

Voltar ao topoUm botão redondo cuja seta pula ao passar o cursorpreenchidocontornosuavevidroneon

Rodapé em colunasQuatro colunas de links, um campo de inscrição e a linha do ano; os links sublinham da esquerda para a direitapreenchidocontornosuavevidroneon

Links sublinhadosO sublinhado cresce do centro ao passar o cursor e fica sob o ativopreenchidocontornosuavevidroneon

SeloUma pequena etiqueta de status com pontopreenchidocontornosuavevidroneon

Aviso em linhaUma faixa com título, texto e botão de fecharpreenchidocontornosuavevidroneon

Indicador de carregamentoUm anel de carregamento com legendacontornosuaveneon

Três pontosTrês pontos quicam um após o outropreenchidosuaveneon

Barra de carregamentoUma barra com um brilho correndo enquanto carregapreenchidosuaveneon

Esqueleto de cartãoUm marcador de cartão com brilho enquanto os dados carregamsuavevidro

Aviso flutuanteUm botão mostra uma mensagem embaixo por dois segundospreenchidocontornosuavevidroneon

Barra de progressoPreenchimento até um valor com rótulo em porcentagempreenchidocontornosuavevidroneon

Anel de progressoUm anel se preenche até uma porcentagem com o número no centropreenchidosuaveneon

NúmeroUm número grande, uma legenda e uma seta de crescimentocontornosuavevidroneon

Avaliação em estrelasCinco estrelas, escolha com clique, destaque ao passar o mousepreenchidocontornoneon

Contador de quantidadeMenos, número, mais: como em um carrinhopreenchidocontornosuavevidroneon

Pilha de avataresCírculos de membros sobrepostos e uma legenda de “+ mais”preenchidocontornovidroneon

Cartão de vantagemUm ícone, um título, um texto; sobe ao passar o mousecontornosuavevidroneon

DepoimentoUma citação, um nome, um cargo e estrelascontornosuavevidroneon

Cartão de preçoUm nome, um preço, três itens e um botãocontornosuavevidroneon

Chave mensal ou anualUma chave de período troca os preços nos cartõespreenchidocontornosuavevidroneon

AcordeãoAs perguntas abrem uma de cada vez, a seta giracontornosuavevidroneon

Linha do tempoUma linha vertical com pontos e dataspreenchidocontornosuavevidroneon

Caixa de chamada para açãoUm título, uma linha e um botão em uma caixapreenchidocontornosuavevidroneon

TeclaUma dica de atalho que afunda ao passar o mousecontornosuavevidroneon

Campo para copiarUm código ou link com um botão que copia e confirmacontornosuavevidroneon

Dica flutuanteUma dica aparece sobre a palavra ao passar o mouse e no focopreenchidovidroneon

Janela modalUm botão abre um diálogo escurecido; botão, fundo e Esc fechamcontornosuavevidroneon

Faixa superiorUma faixa de aviso com link e botão de fecharpreenchidocontornosuavevidroneon

Estado vazioUma moldura pontilhada, um ícone de pasta e uma única ação; a pasta se entreabre ao passar o cursorpreenchidocontornosuavevidroneon

Etapas de carregamentoQuatro linhas acendem por vez: ponto, giro, marca, e de novopreenchidocontornosuavevidroneon

Lista esqueletoTrês linhas com um círculo e barras por onde passa um brilhocontornosuavevidroneon

Aviso que fechaUma barra com ícone e xis; fecha dobrando para cimapreenchidocontornosuavevidroneon

Status dos serviçosQuatro serviços com pontos: três bem, um lento e pulsandopreenchidocontornosuavevidroneon

Alguém está digitandoUm balão de conversa com três pontos que pulam por vezpreenchidocontornosuavevidroneon

Envio de arquivoUma linha de arquivo cuja barra chega a 72 % e mostra a velocidadepreenchidocontornosuavevidroneon

SucessoUm círculo se abre, a marca se desenha em um traço e a legenda sobepreenchidocontornosuavevidroneon

Selo de conquistaUma medalha com faíscas girando ao redor; ao passar o cursor ela balançapreenchidocontornosuavevidroneon

Blocos de indicadoresTrês números com rótulo e variação; a seta aponta para cima ou para baixo e o bloco sobe ao passar o cursorpreenchidocontornosuavevidroneon

Cartão com minigráficoUm número e uma linha fina de 30 dias que se desenha ao aparecerpreenchidocontornosuavevidroneon

BarrasSete barras crescem de baixo por vez; o cursor revela o valorpreenchidocontornosuavevidroneon

Anel de fatiasTrês fatias no anel e um número no centro; a legenda acende ao passar o cursorpreenchidocontornosuavevidroneon

Tabela com ordenaçãoO clique no cabeçalho ordena as linhas e a seta mostra o sentidopreenchidocontornosuavevidroneon

Tabela de líderesCinco lugares com medalhas para os três primeiros e uma barra de pontospreenchidocontornosuavevidroneon

MinicalendárioO mês em grade, hoje com anel e o período escolhido preenchidopreenchidocontornosuavevidroneon

Barras de comparaçãoQuatro barras horizontais com rótulo e porcentagem; crescem da esquerda ao aparecerpreenchidocontornosuavevidroneon

Cartão de produtoCapa com selo, nome, preço e botão; a capa se aproxima ao passar o cursorpreenchidocontornosuavevidroneon

Cartão de perfilAvatar com iniciais sobre um cabeçalho em degradê, um cargo, três números e um botãopreenchidocontornosuavevidroneon

Cartão de artigoCapa, editoria, título que sublinha ao passar o cursor, autor e tempo de leiturapreenchidocontornosuavevidroneon

Citação em destaqueUma aspa grande na cor do site, o texto e o autor com uma barra à esquerdapreenchidocontornosuavevidroneon

Fileira de logosCinco nomes de clientes ficam apagados e ganham cor um a um ao passar o cursorpreenchidocontornosuavevidroneon

Grade bentoQuatro blocos de tamanhos diferentes; a luz segue o cursor pelo bloco apontadopreenchidocontornosuavevidroneon

Registro de mudançasVersão, data, os selos «novo» e «corrigido» e uma lista com pontos na cor do sitepreenchidocontornosuavevidroneon

Capa de vídeoUm quadro 16:9 com um botão de reprodução do qual sai um anelpreenchidocontornosuavevidroneon

Balões de conversaTrês mensagens: as dos outros à esquerda, a sua à direita na cor do site, o horário embaixopreenchidocontornosuavevidroneon

Linha de notificaçãoUm ícone, texto com o nome em negrito, o horário e um ponto de não lidopreenchidocontornosuavevidroneon

Tabela de planosTrês colunas com preços e marcas, a do meio destacada e um pouco mais altapreenchidocontornosuavevidroneon

Cartão que viraUm clique vira o cartão em 3D: na frente o fato, atrás a explicaçãopreenchidocontornosuavevidroneon

CarrosselTrês slides, setas e pontos; a fita desliza com molapreenchidocontornosuavevidroneon

Painel lateralUm botão puxa um painel pela direita com escurecimento; xis, fundo e Escape fechamcontornosuavevidroneon

Cartão ao passar o cursorPasse o cursor pelo nome: sobe um cartão com avatar, cargo e botãocontornosuavevidroneon

Painel inferiorUm painel sobe de baixo com alça, como no celular; o fundo e o Escape fechamcontornosuavevidroneon

Barra de comandosUm Ctrl K caseiro: uma janela com busca cuja lista encolhe conforme você digitacontornosuavevidroneon

Divisor com rótuloUma linha com uma palavra curta no meiocontornosuavevidroneon

Nuvem de tagsLinks de tags com pesos diferentes que acendem ao passar o mousepreenchidocontornosuavevidroneon

Avatar com statusIniciais em um círculo com um ponto “online” pulsando suavementepreenchidocontornovidroneon

Contagem regressivaDias, horas, minutos e segundos até uma data, correndo sozinhospreenchidocontornosuavevidroneon

E mais quinze bibliotecas abertas por dentro

Importadas sob licenças permissivas, limpas de scripts e endereços externos, com cada estilo trancado no próprio elemento.

1.104 Botões865 Carregadores622 Cartões248 Alternadores215 Campos169 Caixas de seleção131 Formulários103 Padrões96 Opções49 Dicas38 input37 button35 motion30 dropdown27 footers25 menus23 menu23 select23 tooltip22 Notificações22 tabs21 footer21 pagination20 card20 spinners19 indicator19 contact18 avatar18 breadcrumbs18 stats17 badge17 hero17 radio17 steps16 accordions16 badges16 vertical-menu16 testimonials16 content16 feature15 progress15 pricing15 alerts14 mask14 tab14 table14 timeline14 cta14 loader14 Texto13 aura13 divider13 range13 textarea13 blog-cards12 checkbox12 collapse12 skeleton12 dividers12 modals12 selects12 textareas12 toasts12 announcements11 alert11 fab11 file-input11 validator11 tables11 features10 accordion10 link10 modal10 navbar10 theme-controller10 toast10 toggle10 button-groups10 empty-states10 grids10 progress-bars10 contact-forms10 empty-content10 avatars9 carousel9 sign-in-and-registration8 rating8 stack8 details-list8 media8 quantity-inputs8 ctas8 feature-grids8 headers8 product-cards8 faq8 sidebar8 header7 countdown7 dock7 kbd7 list7 loading7 stat7 portfolio7 404-pages7 email-templates7 Layout6 join6 label6 megamenu6 mockup-code6 otp6 swap6 timelines6 carts6 faqs6 polls6 team-sections6 blog6 cookies6 button-group6 ecommerce6 gallery6 statistic6 step6 team6 testimonial6 call-to-action5 chat5 drawer5 fieldset5 radial-progress5 status5 text-rotate5 radio-groups5 range-inputs5 notification5 404-5005 heroes5 login4 file-uploaders4 filters4 side-menu4 banners4 newsletter-signup4 product-collections4 sections4 teams4 media-object4 blog-list4 forgot-password4 logos4 register4 statistics4 verification3 filter3 hover-3d3 skip-links3 logo-clouds3 heros3 breadcrumb3 form-layout2 diff2 hover-gallery2 mockup-phone2 mockup-window2 analytics-dashboard2 support-inbox2 empty-state2 privacy-terms1 calendar1 animate-duration-delay1 remove-number-input-spinners1 storefront1 navbars

Fontes:Uiverse · MIT · 3.348daisyUI · MIT · 580HyperUI · MIT · 518Meraki UI · MIT · 194Sailboat UI · MIT · 133Tailblocks · MIT · 116Whirl · MIT · 96Kutty · MIT · 68CSSFX · MIT · 45CSShake · MIT · 35Loaders.css · MIT · 29Hamburgers · MIT · 25Epic Spinners · MIT · 20Three Dots · MIT · 20SpinKit · MIT · 12

Coloque uma peça na sua página

No construtor: abra uma seção, aperte «Componentes» ou «Biblioteca», escolha um cartão e insira. Ao remover, o documento volta byte a byte.