Una biblioteca para cada pieza pequeña

Botones, interruptores, paneles laterales, cargadores, formularios, tarjetas y microanimaciones: eliges, pulsas «Insertar» y la pieza entra en tu página. Cero créditos, se quita con un clic.

1350 tarjetas propias listas · 5239 elementos abiertos de quince bibliotecas

Buscar en la bibliotecaAspecto

Cada tarjeta está viva: la vista previa ejecuta el mismo código que inserta el constructor, en un espacio aislado.

Barra de pestañas líquidaLa pestaña activa no se desliza por la barra, la derrite: la gota se separa de la barra y vuelve a fundirse con ellarellenocontornosuavecristalneón

Impresora de recibosEl pago no termina con una marca: el botón se convierte en una línea de estado y por la ranura de abajo sale un recibo de papelrellenocontornosuavecristalneón

Botón de compartir que se transformaEl propio botón se estira en una fila de logos de redes, una burbuja bajo el cursor nombra la elección y un toque la pliega en una confirmaciónrellenocontornosuavecristalneón

Cuadrícula cinéticaLos puntos se apartan ante el cursor: en el centro se hunden, en el borde se enciende un anillo y los lejanos no se muevenrellenocontornosuavecristalneón

Órbita de pantallasLas pantallas recorren un anillo 3D y siempre miran al espectador; el anillo gira y se inclina hacia el cursorrellenocontornosuavecristalneón

Transformación de palabraLa palabra anterior se derrite y se recompone en la nueva, y debajo los mismos bloques se reordenan en el diseño de lo que nombrarellenocontornosuavecristalneón

Interruptor de móvilUn carril suave y un mando con sombra que se estira al pulsarlo y vuelve con muellerellenocontornosuavecristalneón

Interruptor de sol y lunaDentro del mando el sol se convierte en luna mientras el carril se encienderellenocontornosuavecristalneón

Interruptor con el estado escritoLa palabra de al lado cambia con el estado y sube deslizándose en vez de parpadearrellenocontornosuavecristalneón

Interruptor de tres posicionesUn carril con tres posiciones y un mando que viaja hasta la elegidarellenocontornosuavecristalneón

Interruptor que guardaAl encenderlo un anillo da una vuelta alrededor del mando mientras se guarda el ajusterellenocontornosuavecristalneón

Interruptor grandeUn carril del tamaño del pulgar con un texto bien visible, pensado para ajustes en el móvilrellenocontornosuavecristalneón

Interruptor con texto dentroLas palabras «sí» y «no» viven dentro del carril y cambian junto con el mandorellenocontornosuavecristalneón

Interruptor cuadradoEsquinas rectas y un recorrido corto, para paneles técnicos hechos con retícularellenocontornosuavecristalneón

Lista de ajustes con interruptoresTres filas, cada una con su texto y su interruptor, separadas por una línea muy finarellenocontornosuavecristalneón

Interruptor de consentimientoUna fila de consentimiento cuyo enlace subrayado a las condiciones se pulsa aparte del interruptorrellenocontornosuavecristalneón

Botón fantasmaEn reposo solo el texto y su flecha; la placa emerge al pasar el cursor y al enfocar con el tecladorellenocontornosuavecristalneón

Botón con relleno que entraAl pasar el cursor el relleno entra desde la izquierda y la flecha sale detrásrellenocontornosuavecristalneón

Botón partidoLa acción principal a la izquierda y a la derecha una flecha que abre las acciones cercanasrellenocontornosuavecristalneón

Botón de copiar que cambia de textoAl lado se ve qué se copia y el texto del botón sube hasta «copiado»rellenocontornosuavecristalneón

Descarga con barraPor el borde de abajo corre una barra, el icono gira y al final se queda una marcarellenocontornosuavecristalneón

Botón de compartirTres formas de compartir esperan apagadas al lado y se despliegan al pasar el cursorrellenocontornosuavecristalneón

Botones de atrás y siguienteUn botón de atrás discreto y uno principal de siguiente, con el número de paso en mediorellenocontornosuavecristalneón

Volver arriba con anilloUn botón redondo con un anillo de lo leído y una flecha que da un salto al pasar el cursorrellenocontornosuavecristalneón

Botón flotante con pistaUn botón de acción redondo cuya pista sale al pasar el cursor y al enfocar con el tecladorellenocontornosuavecristalneón

Botón con anillo degradadoEl borde está hecho con tonos del color de marca y va girando despacio por el contornorellenocontornosuavecristalneón

Botón con brilloUn brillo inclinado lo recorre una sola vez al pasar el cursor y al enfocar con el tecladorellenocontornosuavecristalneón

Botón con onda al pulsarAl pulsar, desde el centro se abre un círculo que se apaga, sin una sola línea de scriptrellenocontornosuavecristalneón

Botón cuyo icono se convierte en marcaEl más gira hasta volverse anillo de espera y, cuando ya está guardado, se dibuja una marcarellenocontornosuavecristalneón

Mantener para confirmarEl relleno crece mientras se mantiene pulsado y al soltar se cancela todorellenocontornosuavecristalneón

Deslizar para confirmarEl mando se arrastra a la derecha con el relleno detrás, así un toque accidental no confirmarellenocontornosuavecristalneón

Botón con contadorEl número va en la esquina del botón y da un pequeño salto al pasar el cursorrellenocontornosuavecristalneón

Botón de seguir con estadoEl nombre del botón no cambia, cambia el estado, y el texto sube con una marcarellenocontornosuavecristalneón

Voto a favor y en contraDos flechas alrededor de la puntuación; la pulsada se enciende y da un salto cortorellenocontornosuavecristalneón

Valoración con estrellas y palabraCinco estrellas se llenan de color y debajo aparece la palabra de la nota elegidarellenocontornosuavecristalneón

Contador de cantidadMenos y más en los extremos, el número en medio con cifras de ancho fijorellenocontornosuavecristalneón

Cambio entre lista y cuadrículaLista o cuadrícula: el fondo se desliza bajo el icono elegidorellenocontornosuavecristalneón

Hamburguesa que se vuelve aspaTres barras se juntan en un aspa: la del medio se apaga y las otras dos giran una hacia otrarellenocontornosuavecristalneón

AuroraTres cintas de luz cruzan la parte de arriba mientras abajo queda un cielo oscuro con estrellasrellenocontornosuavecristalneón

Lluvia de meteorosOcho chispas con cola caen en diagonal por el cuadro, cada una a su turnorellenocontornosuavecristalneón

Cuadrícula retroUna cuadrícula va hacia el horizonte y corre hacia ti, con un sol a rayas encimarellenocontornosuavecristalneón

Rejilla de puntosUna cuadrícula regular de puntos y un charco de luz que sigue al cursorrellenocontornosuavecristalneón

Rayos de luzCinco haces estrechos salen de un punto de arriba y se mecen apenasrellenocontornosuavecristalneón

Niebla de colorCuatro manchas de color flotan y cambian de forma, con tonos que se abren desde el de la marcarellenocontornosuavecristalneón

Velo de granoGrano de verdad sobre un baño de color: película, no plásticorellenocontornosuavecristalneón

Anillo de luzDos anillos finos giran encontrados alrededor de un halo que respirarellenocontornosuavecristalneón

Ola en marchaTres olas avanzan a distinta velocidad y suman agua vivarellenocontornosuavecristalneón

Onda al pulsarLos círculos se abren solos y salen tres veces más rápido al pulsarrellenocontornosuavecristalneón

Borde luminosoUn haz recorre el marco del bloque mientras dentro todo sigue tranquilorellenocontornosuavecristalneón

Degradado de mallaDoce celdas de color se difuminan en un único fondo que fluyerellenocontornosuavecristalneón

Titular degradadoPor las letras corre sin fin un degradado hecho con los colores de la páginarellenocontornosuavecristalneón

Brillo en el textoCada pocos segundos una franja clara recorre las letrasrellenocontornosuavecristalneón

Máquina de escribirLa línea se escribe letra a letra, se borra hacia atrás y el cursor parpadearellenocontornosuavecristalneón

Palabra que cambiaLa última palabra del titular cambia por la siguiente y el resto se queda quietorellenocontornosuavecristalneón

DistorsiónLa palabra se rompe en capas de color y se recompone al instanterellenocontornosuavecristalneón

Texto contorneadoLas letras se dibujan con contorno y el relleno avanza desde la izquierdacontornosuavecristalneón

Letrero de neónEl tubo arde, parpadea de vez en cuando y trae su propio fondo oscurorellenosuavecristalneón

Titular resaltadoDetrás de una palabra se despliega una franja de color, como el trazo de un rotuladorrellenocontornosuavecristalneón

Subrayado a pincelBajo la palabra se dibuja una línea irregular, como hecha a pincelrellenocontornosuavecristalneón

Cita con luzUna cita grande con un charco de luz que se aviva detrás de la comillacontornosuavecristalneón

Cifras que cuentanTres cifras con etiqueta; bajo cada una se enciende su propia rayarellenocontornosuavecristalneón

Tablero de cifrasSeis tambores giran hasta su dígito, cada uno un poco después que el vecinorellenosuavecristalneón

Barra de logroLa barra llega hasta su marca y un brillo la recorre sin pararrellenocontornosuavecristalneón

Anillos de progresoTres anillos se dibujan hasta su parte y la escriben en el centrorellenocontornosuavecristalneón

Panel lateral izquierdoLa navegación entra desde el borde izquierdo con fondo oscurecido; el mismo botón la cierrarellenocontornosuavecristalneón

Panel lateral derechoLos detalles de la fila se abren en un panel a la derecha y la lista se queda en su sitiorellenocontornosuavecristalneón

Panel superiorUn panel baja desde el borde de arriba: un anuncio, la búsqueda o acciones rápidasrellenocontornosuavecristalneón

Hoja inferior con topesUna hoja con asa se detiene a media altura y un botón la sube hasta arriba del todorellenocontornosuavecristalneón

Panel del carritoEl carrito entra desde la derecha con las líneas, el total y un botón de pagorellenocontornosuavecristalneón

Panel de filtrosLos filtros se van a un panel: casillas, un rango de precio y el número de resultados abajorellenocontornosuavecristalneón

Panel de ajustesLos ajustes de la sección en un panel a la derecha: interruptores con texto y una lista desplegablerellenocontornosuavecristalneón

Panel de menú móvilUn menú a toda altura con elementos grandes y una sección anidada que se abre en el sitiorellenocontornosuavecristalneón

Hoja de accionesDesde abajo sube una lista de acciones con una fila peligrosa aparte y un botón de cancelarrellenocontornosuavecristalneón

Búsqueda a pantalla completaLa búsqueda ocupa la pantalla entera: un campo, las consultas recientes y una pista de tecladorellenocontornosuavecristalneón

Visor de imagenUna foto se abre sobre la página con pie, contador y una tira de miniaturasrellenocontornosuavecristalneón

Capa de cargaLa sección queda cubierta por un velo con un anillo y un texto hasta que llegan los datosrellenocontornosuavecristalneón

Ventana de confirmaciónPregunta antes de lo irreversible: qué se borra exactamente, en qué acaba y dos botonesrellenocontornosuavecristalneón

Ventana con pasosUn asistente en una ventana: la barra de pasos arriba, una pregunta por pantalla, atrás y siguienterellenocontornosuavecristalneón

Ventana con formularioUn formulario corto en una ventana: dos campos, una casilla de consentimiento y un botón, y la página debajo no se pierderellenocontornosuavecristalneón

Ventana a pantalla completaLa ventana ocupa la pantalla entera: su propia cabecera, contenido largo y un botón de guardar abajorellenocontornosuavecristalneón

Ventana con ilustración lateralA la izquierda el dibujo y una sola idea, a la derecha el texto y un botón; en el móvil el dibujo pasa arribarellenocontornosuavecristalneón

Centro de notificacionesUn panel bajo la campana: los no leídos con punto, la hora y un botón para marcarlo todorellenocontornosuavecristalneón

Panel de ayudaUna ayuda flotante: buscador de artículos, tres respuestas y una fila de soporte en vivorellenocontornosuavecristalneón

Panel de perfilUn panel bajo el avatar: nombre, correo, plan y un menú corto con el cierre de sesión abajorellenocontornosuavecristalneón

Panel de historialUna lista de versiones con la actual marcada: cuándo, quién y qué cambió, y la vuelta a cualquierarellenocontornosuavecristalneón

Menú contextual de la filaUn botón de tres puntos abre el menú de acciones de la fila sobre la listarellenocontornosuavecristalneón

Menú con seccionesUn menú desplegable con grupos con título, atajos de teclado y una fila aparte abajorellenocontornosuavecristalneón

Tarjeta de vista previaPasa el cursor por el nombre y emerge la tarjeta del autor; el botón de al lado la fija para quien no tiene ratónrellenocontornosuavecristalneón

Ayuda emergente por los cuatro ladosUna misma ayuda en cuatro posiciones: arriba, a la derecha, abajo y a la izquierda, cada una con su picorellenocontornosuavecristalneón

Ayuda con títuloUn círculo con signo de interrogación abre una ayuda con título, un párrafo y un enlacerellenocontornosuavecristalneón

Pila de avisos flotantesTres avisos en la esquina: éxito, advertencia y normal; el aspa quita el suyorellenocontornosuavecristalneón

Barra con deshacerUna barra abajo cuenta lo ocurrido, ofrece deshacerlo y se desvanece siguiendo una tira de tiemporellenocontornosuavecristalneón

Ventana de consentimientoUna ventana de cookies en la esquina: qué se recoge, un enlace a la política y dos botones de elección igualesrellenocontornosuavecristalneón

Invitación a suscribirseUna ventana con una franja ilustrada, la promesa de una carta al mes, un campo de correo y un asparellenocontornosuavecristalneón

Haz en el bordeUn segmento luminoso recorre el borde de la tarjeta sin pararrellenocontornosuavecristalneón

Tarjeta con focoUn charco de luz suave sigue al ratón por la tarjetarellenocontornosuavecristalneón

Tarjeta inclinadaLa tarjeta gira siguiendo al ratón, como una placa de verdadrellenocontornosuavecristalneón

Tarjeta de neónEl tubo de neón del borde respira y las letras brillan como un rótulocontornosuavecristalneón

Cristal con auroraDetrás del cristal esmerilado flotan despacio manchas de colorcontornosuavecristalneón

Baraja en abanicoTres tarjetas en una pila que se abren en abanico al pasar el cursorrellenocontornosuavecristalneón

Tarjeta con cortinaEl panel inferior sube y descubre el texto que hay bajo la portadarellenocontornosuavecristalneón

Producto con brilloPor la tarjeta de producto pasa sola una franja de luzrellenocontornosuavecristalneón

Reseña con comilla luminosaUna comilla enorme arde despacio detrás del texto y se avivarellenocontornosuavecristalneón

Muro de reseñasLas reseñas avanzan en una cinta sin fin y los bordes se disuelven en el fondocontornosuavecristalneón

Botón con anillo de luzUn anillo de luz gira alrededor del botón y una onda sale una y otra vezrellenocontornosuavecristalneón

Botón líquidoDentro tiembla una gota que al pasar el cursor inunda todo el botónrellenocontornosuavecristalneón

Botón magnéticoEl botón se inclina hacia el cursor como si estuviera imantadorellenocontornosuavecristalneón

Botón con haz en el bordeDos segmentos claros se persiguen por el borde del botóncontornosuavecristalneón

Botón con chispasAlrededor del botón saltan chispas y al pasar el cursor son másrellenocontornosuavecristalneón

Botón que cambia de textoAl pasar el cursor la etiqueta sube y por abajo llega la segundarellenocontornosuavecristalneón

Botón grande con luz a la derivaPor un botón ancho flota despacio un degradado y debajo queda una sombra de colorrellenocontornosuavecristalneón

Barra de iconosUna tira de iconos: el que está bajo el cursor crece y los vecinos se elevan un pocorellenocontornosuavecristalneón

Órbita de personasDos anillos de caras giran despacio alrededor de un signo centralrellenocontornosuavecristalneón

Cinta de logotiposLas marcas de clientes giran en bucle y los bordes de la cinta se funden con el fondocontornosuavecristalneón

Bento con luzUna cuadrícula de fichas desiguales por la que viaja un único charco de luzrellenocontornosuavecristalneón

Precios con luzTres planes; por el del medio corre la luz y queda más altorellenocontornosuavecristalneón

Franja de logrosCuatro cifras cuentan desde cero cuando la franja entra en el cuadrorellenocontornosuavecristalneón

Pasos con hazTres pasos unidos por un hilo por el que corre una chisparellenocontornosuavecristalneón

Llamada finalUn bloque ancho en un marco luminoso con una retícula de puntos que respira tras el textorellenocontornosuavecristalneón

Puntos en olaCinco puntos suben y bajan en ola, uno tras otrorellenocontornosuavecristalneón

Anillo que lateEl núcleo no se mueve y de él salen dos anillos por turnosrellenocontornosuavecristalneón

Barra de cargaDos segmentos recorren el carril mientras no se sabe cuánto quedarellenocontornosuavecristalneón

Esqueleto de tarjetaSitio para una portada, un titular, dos líneas y un botón, con un brillo que los recorrerellenocontornosuavecristalneón

Esqueleto de tablaUna cabecera y cuatro filas de tres celdas; las filas se aclaran por turnosrellenocontornosuavecristalneón

Indicador de segmentosDoce rayas en círculo se apagan por turnos, como en la espera del sistemarellenocontornosuavecristalneón

Cuadrados que saltanCuatro cuadrados saltan por turnos y se achatan un poco al caerrellenocontornosuavecristalneón

Reloj de arenaLa arena cae de arriba abajo y vuelve a empezar cuando la parte de arriba se vacíarellenocontornosuavecristalneón

Cometa en órbitaUn punto recorre un anillo y arrastra detrás una cola que se apagarellenocontornosuavecristalneón

Bloque con brilloUn marcador de cualquier tamaño por el que pasa en diagonal una franja de luzrellenocontornosuavecristalneón

Punto de conexiónUn punto con un anillo que se abre y un texto: se ve que la conexión está vivarellenocontornosuavecristalneón

LatidoUn corazón late mientras el trazo del cardiograma se dibuja sobre una guía pálidarellenocontornosuavecristalneón

Número que cuentaEl número sube y cuenta hasta su total cuando entra en pantallarellenocontornosuavecristalneón

Barra con porcentajeUn texto, un porcentaje y un carril: el relleno crece desde la izquierda hasta su valorrellenocontornosuavecristalneón

Anillo con porcentajeUn arco avanza hasta su valor y el número se queda en el centrorellenocontornosuavecristalneón

Puntos de pasosCinco puntos en un hilo: los hechos van rellenos y el actual es mayor y respira con un anillorellenocontornosuavecristalneón

Cuenta atrás en cifrasHoras, minutos y segundos hasta el plazo; los dos puntos parpadean y las cifras avanzan solasrellenocontornosuavecristalneón

Medidor de fuerzaCuatro segmentos se llenan uno tras otro y nombran el nivel con una palabrarellenocontornosuavecristalneón

Indicador de sincronizaciónDos flechas giran en círculo mientras los cambios viajan al servidorrellenocontornosuavecristalneón

GrabandoUn punto que parpadea, la palabra «grabando» y el tiempo desde que empezó la tomarellenocontornosuavecristalneón

Marca que se dibujaEl círculo se traza solo y detrás se dibuja la marcarellenocontornosuavecristalneón

Aspa que se dibujaEl círculo se traza solo y luego el aspa se dibuja con dos trazos seguidosrellenocontornosuavecristalneón

Corazón con chispasEl corazón se hincha un instante y de él salen seis chispasrellenocontornosuavecristalneón

Estrella que se llenaEl contorno de la estrella se llena de abajo arriba y al final da un salto cortorellenocontornosuavecristalneón

Campana que se balanceaUna campana con contador se balancea, se calma y vuelve a empezarrellenocontornosuavecristalneón

Flecha que saltaUn texto y una flecha hacia abajo que salta un momento e invita a bajarrellenocontornosuavecristalneón

Cursor que escribeLa línea aparece a tirones, como tecleada, y al final parpadea el cursorrellenocontornosuavecristalneón

Subrayado a pincelBajo una sola palabra se traza sola una línea irregular a pincelrellenocontornosuavecristalneón

Icono que giraLa ficha gira al pasar el cursor y con el teclado: el enlace se convierte en marcarellenocontornosuavecristalneón

Confeti que estallaDe la marca salen en abanico diez papelitos que se apagan al volarrellenocontornosuavecristalneón

Iniciar sesiónCorreo, contraseña con ojo, «recordarme» y un enlace por correo como segunda víarellenocontornosuavecristalneón

Crear cuentaNombre, correo, contraseña con medidor de fuerza en vivo y veredicto, aceptación de condicionesrellenocontornosuavecristalneón

Restablecer contraseñaUn campo de correo, un botón y la vuelta atrás; el sobre se balancea al pasar el cursorrellenocontornosuavecristalneón

Código de verificaciónSeis casillas con salto automático, pegado desde el portapapeles y botón que se enciende con el código completorellenocontornosuavecristalneón

Acceso con enlace por correoSolo el correo y un botón; una chispa recorre el botón al pasar el cursorrellenocontornosuavecristalneón

Acceso a dos columnasA la izquierda un panel con una cita y un degradado vivo, a la derecha el formulario con contraseñarellenocontornosuavecristalneón

Página 404Un número enorme flota y respira, debajo la vuelta atrás y un buscadorrellenocontornosuavecristalneón

Algo se ha rotoPantalla de error con un botón «Reintentar» que gira de verdad y rinde cuentasrellenocontornosuavecristalneón

PróximamenteCuenta atrás en vivo en cuatro fichas y un campo «avísame cuando abráis»rellenocontornosuavecristalneón

MantenimientoDos engranajes giran encontrados, un plazo y un enlace al estadorellenocontornosuavecristalneón

Barra de cookiesBarra inferior con dos botones honestos; se cierra con suavidadrellenocontornosuavecristalneón

Formulario de contactoNombre, correo, asunto y un mensaje con contador de caracteres; el botón promete un plazo de respuestarellenocontornosuavecristalneón

Lista de esperaCorreo, tu puesto en la cola y una pila de avatares de quienes ya se apuntaronrellenocontornosuavecristalneón

Muro de pagoEl texto se pierde en la niebla, encima un candado y el precio; al pasar el cursor la niebla se levanta un pocorellenocontornosuavecristalneón

Primeros pasosLista del primer día con barra de progreso; las marcas las pones túrellenocontornosuavecristalneón

BotónUn botón con elevación suave al pasar el cursor y estado pulsadorellenocontornosuavecristalneón

Botón con flechaLa flecha se desliza a la derecha al pasar el cursorrellenocontornosuavecristalneón

Botón de iconoUn botón redondo con icono que gira un poco al pasar el cursorrellenocontornosuavecristalneón

InterruptorUn interruptor con mando elástico, teclado y aria-checkedrellenocontornosuavecristalneón

CasillaLa marca se dibuja sola al marcarrellenocontornosuavecristalneón

Grupo de opcionesTres opciones, el punto de selección entra con reboterellenocontornosuavecristalneón

Control segmentadoEl resaltado se desliza al segmento elegidorellenocontornosuavecristalneón

Chips de filtroUna fila de chips, el elegido resaltado, el cursor lo elevarellenocontornosuavecristalneón

Campo con etiqueta flotanteLa etiqueta sube al escribir y el borde se enciende con el color del sitiocontornosuavecristalneón

Barra de búsquedaUn campo con lupa y pista de tecladocontornosuavecristalneón

Cuadro de mensaje con contadorUn campo de varias líneas cuyo borde se enciende al enfocarcontornosuavecristalneón

DesplegableUn select nativo con flecha y borde propioscontornosuavecristalneón

Deslizador con valorUna pista rellena y un número que sigue al controlrellenocontornosuavecristalneón

Suscripción en líneaUn campo y un botón en una cápsularellenocontornosuavecristalneón

PestañasEl subrayado se desliza a la pestaña activa, las flechas cambianrellenocontornosuavecristalneón

Migas de panUn recorrido por secciones con separadores y la página actualcontornosuavecristalneón

PaginaciónNúmeros de página con la activa y flechasrellenocontornosuavecristalneón

Pasos de progresoTres pasos, los hechos marcados, el actual resaltadorellenocontornosuavecristalneón

Menú de píldorasUn menú horizontal con el elemento activo en una píldorarellenocontornosuavecristalneón

Menú desplegableUn botón abre una lista; clic fuera y Escape la cierranrellenocontornosuavecristalneón

Botón con destelloUna franja de luz recorre el botón al pasar el cursorrellenocontornosuavecristalneón

Botón con borde degradadoUn borde degradado gira alrededor del botón y acelera al pasar el cursorcontornosuavecristalneón

Botón con cargaAl pulsar aparece un indicador, luego una marca «Listo» y después vuelve a su sitiorellenocontornosuavecristalneón

Grupo de botonesTres botones en un solo bloque, el activo destacarellenocontornosuavecristalneón

Botón de acción flotanteUn círculo con un más; al pasar el cursor sale una etiqueta y el más girarellenocontornosuavecristalneón

Botón de me gustaEl corazón se rellena y da un salto al pulsarlo, con el contador al ladorellenocontornosuavecristalneón

Interruptor con textoDentro del carril están las palabras «sí» y «no», y el mando cruza con muellerellenocontornosuavecristalneón

Tarjeta con casillaLa tarjeta entera es la casilla: el borde se enciende y la marca se dibujarellenocontornosuavecristalneón

Tarjetas de opciónTres formas de envío, una elegida; el punto de selección se mueve a la activarellenocontornosuavecristalneón

Muestras de colorCírculos de color de la paleta del sitio; el elegido lleva anillo y es algo mayorrellenocontornosuavecristalneón

Selector de tallaCuadros S, M, L, XL; uno no está disponible y va tachadorellenocontornosuavecristalneón

Cambio de temaEl sol se va, llega la luna; el carril se oscurecerellenocontornosuavecristalneón

Cambio de vistaLista, cuadrícula, mapa: el fondo se desliza bajo el icono elegidorellenocontornosuavecristalneón

Botón con relieveEl botón se apoya en una base y se hunde al pulsarlorellenocontornosuavecristalneón

Botón con pulsoDel botón salen anillos como de una señal y se detienen al pasar el cursorrellenocontornosuavecristalneón

Campo con iconoEl icono de búsqueda de la izquierda se enciende junto con el borde al enfocarcontornosuavecristalneón

Campo de contraseñaEl ojo muestra y oculta la contraseña, y se tacha cuando está a la vistacontornosuavecristalneón

Casillas de códigoCuatro casillas, el cursor avanza solo y el pegado reparte los dígitoscontornosuavecristalneón

Zona para soltar archivosUn área punteada con una nube que se eleva al pasar el cursorcontornosuavecristalneón

Campo con etiquetasEtiquetas con aspas dentro del campo; el aspa quita la etiqueta encogiéndolacontornosuavecristalneón

Lista con búsqueda vivaEscribes y la lista se reduce; el resultado vacío lo dice con honestidadcontornosuavecristalneón

Área de texto con contadorEl contador de caracteres vive en la esquina y avisa cerca del límitecontornosuavecristalneón

Escala de 0 a 10Once casillas de valoración; se rellenan la elegida y todas las de su izquierdarellenocontornosuavecristalneón

Días de la semanaSiete casillas redondas; las elegidas se rellenan con muellerellenocontornosuavecristalneón

Campos con prefijoUna dirección con https:// y un importe con moneda; el prefijo forma parte del marcocontornosuavecristalneón

Campo con validaciónCorreo: aparece una marca cuando la dirección parece real y un aspa cuando nocontornosuavecristalneón

Cabecera del sitioLogotipo, enlaces, un botón y un menú de hamburguesa que se abre en pantallas estrechasrellenocontornosuavecristalneón

MegamenúEl elemento «Producto» abre un panel de tres columnas al pasar el cursor y al enfocarrellenocontornosuavecristalneón

Menú lateralElementos con iconos, el activo con una barra a la izquierda y un contador en la bandejarellenocontornosuavecristalneón

Pestañas inferioresCuatro pestañas como en una app; la activa eleva su icono y muestra la etiquetarellenocontornosuavecristalneón

Índice de la página«En esta página»: lista de anclas, la activa marcada y un empujón al pasar el cursorrellenocontornosuavecristalneón

Volver arribaUn botón redondo cuya flecha da un salto al pasar el cursorrellenocontornosuavecristalneón

Pie a varias columnasCuatro columnas de enlaces, un campo de suscripción y la línea del año; los enlaces se subrayan de izquierda a derecharellenocontornosuavecristalneón

Enlaces subrayadosEl subrayado crece desde el centro al pasar el cursor y se queda bajo el activorellenocontornosuavecristalneón

InsigniaUna pequeña etiqueta de estado con puntorellenocontornosuavecristalneón

Aviso en líneaUna franja con título, texto y botón de cerrarrellenocontornosuavecristalneón

Indicador de cargaUn anillo de carga con textocontornosuaveneón

Tres puntosTres puntos rebotan uno tras otrorellenosuaveneón

Barra de cargaUna barra con un destello mientras cargarellenosuaveneón

Esqueleto de tarjetaUn marcador de tarjeta con brillo mientras cargan los datossuavecristal

Aviso flotanteUn botón muestra un mensaje abajo durante dos segundosrellenocontornosuavecristalneón

Barra de progresoRelleno hasta un valor con etiqueta de porcentajerellenocontornosuavecristalneón

Anillo de progresoUn anillo se rellena hasta un porcentaje con el número en el centrorellenosuaveneón

CifraUn número grande, un texto y una flecha de crecimientocontornosuavecristalneón

Valoración con estrellasCinco estrellas, se eligen con clic, se resaltan al pasar el cursorrellenocontornoneón

Contador de cantidadMenos, número, más: como en un carritorellenocontornosuavecristalneón

Pila de avataresCírculos de miembros superpuestos y un texto de «+ más»rellenocontornocristalneón

Tarjeta de ventajaUn icono, un título, un texto; se eleva al pasar el cursorcontornosuavecristalneón

TestimonioUna cita, un nombre, un cargo y estrellascontornosuavecristalneón

Tarjeta de precioUn nombre, un precio, tres puntos y un botóncontornosuavecristalneón

Interruptor mensual o anualUn interruptor de periodo cambia los precios de las tarjetasrellenocontornosuavecristalneón

AcordeónLas preguntas se abren de una en una, la flecha giracontornosuavecristalneón

CronologíaUna línea vertical con puntos y fechasrellenocontornosuavecristalneón

Caja de llamada a la acciónUn título, una línea y un botón en una cajarellenocontornosuavecristalneón

TeclaUna pista de atajo que se hunde al pasar el cursorcontornosuavecristalneón

Campo para copiarUn código o enlace con un botón que copia y confirmacontornosuavecristalneón

Ayuda emergenteUna ayuda aparece sobre la palabra al pasar el cursor y al enfocarrellenocristalneón

Ventana modalUn botón abre un diálogo atenuado; el botón, el fondo y Escape lo cierrancontornosuavecristalneón

Franja superiorUna franja de anuncio con enlace y botón de cerrarrellenocontornosuavecristalneón

Estado vacíoUn marco punteado, un icono de carpeta y una sola acción; la carpeta se entreabre al pasar el cursorrellenocontornosuavecristalneón

Pasos de cargaCuatro líneas se encienden por turnos: punto, indicador, marca, y vuelta a empezarrellenocontornosuavecristalneón

Lista esqueletoTres filas con un círculo y barras por las que pasa un brillocontornosuavecristalneón

Aviso que se cierraUna barra con icono y aspa; se cierra plegándose hacia arribarellenocontornosuavecristalneón

Estado de los serviciosCuatro servicios con puntos: tres bien, uno degradado y parpadeandorellenocontornosuavecristalneón

Alguien está escribiendoUn globo de chat con tres puntos que saltan por turnosrellenocontornosuavecristalneón

Subida de archivoUna fila de archivo cuya barra llega al 72 % y muestra la velocidadrellenocontornosuavecristalneón

ConfirmaciónUn círculo se abre, la marca se dibuja de un trazo y el texto aparece desde abajorellenocontornosuavecristalneón

Insignia de logroUna medalla con chispas girando a su alrededor; al pasar el cursor la medalla se balancearellenocontornosuavecristalneón

Fichas de indicadoresTres cifras con etiqueta y variación; la flecha señala arriba o abajo y la ficha se eleva al pasar el cursorrellenocontornosuavecristalneón

Tarjeta con minigráficoUna cifra y una línea fina de 30 días que se dibuja al aparecerrellenocontornosuavecristalneón

BarrasSiete barras crecen desde abajo por turnos; el cursor muestra el valorrellenocontornosuavecristalneón

Anillo de partesTres partes en un anillo con una cifra en el centro; la leyenda se ilumina al pasar el cursorrellenocontornosuavecristalneón

Tabla ordenableAl pulsar una cabecera las filas se ordenan y la flecha indica el sentidorellenocontornosuavecristalneón

Tabla de líderesCinco puestos con medallas para los tres primeros y barra de puntosrellenocontornosuavecristalneón

MinicalendarioEl mes en cuadrícula, hoy con anillo y el intervalo elegido rellenorellenocontornosuavecristalneón

Barras de comparaciónCuatro barras horizontales con etiqueta y porcentaje; crecen desde la izquierda al aparecerrellenocontornosuavecristalneón

Tarjeta de productoPortada con etiqueta, nombre, precio y botón; la portada se acerca al pasar el cursorrellenocontornosuavecristalneón

Tarjeta de perfilAvatar con iniciales sobre una cabecera degradada, un cargo, tres cifras y un botónrellenocontornosuavecristalneón

Tarjeta de artículoPortada, sección, titular que se subraya al pasar el cursor, autor y tiempo de lecturarellenocontornosuavecristalneón

Cita destacadaUna comilla grande del color del sitio, el texto y el autor con una barra a la izquierdarellenocontornosuavecristalneón

Fila de logotiposCinco nombres de clientes apagados que cobran color de uno en uno al pasar el cursorrellenocontornosuavecristalneón

Cuadrícula bentoCuatro fichas de distinto tamaño; la luz sigue al cursor por la ficha señaladarellenocontornosuavecristalneón

Entrada del registro de cambiosVersión, fecha, etiquetas «nuevo» y «corregido» y una lista con puntos del color del sitiorellenocontornosuavecristalneón

Portada de vídeoUn cuadro 16:9 con un botón de reproducción del que sale un anillorellenocontornosuavecristalneón

Globos de chatTres mensajes: los ajenos a la izquierda, el tuyo a la derecha con el color del sitio y la hora debajorellenocontornosuavecristalneón

Fila de notificaciónUn icono, texto con el nombre en negrita, la hora y un punto de no leídorellenocontornosuavecristalneón

Tabla de preciosTres columnas con precios y marcas, la del medio destacada y algo más altarellenocontornosuavecristalneón

Tarjeta que giraUn clic gira la tarjeta en 3D: delante el dato, detrás la explicaciónrellenocontornosuavecristalneón

CarruselTres diapositivas, flechas y puntos; la cinta se desliza con muellerellenocontornosuavecristalneón

Panel lateralUn botón despliega un panel desde la derecha con fondo oscurecido; se cierra con el aspa, el fondo y Escapecontornosuavecristalneón

Tarjeta al pasar el cursorPasa el cursor por el nombre: emerge una tarjeta con avatar, cargo y botóncontornosuavecristalneón

Hoja inferiorUna hoja sube desde abajo con asa, como en el móvil; el fondo y Escape la cierrancontornosuavecristalneón

Paleta de comandosUn Ctrl K casero: un cuadro con búsqueda cuya lista se reduce a medida que escribescontornosuavecristalneón

Separador con etiquetaUna línea con una palabra corta en mediocontornosuavecristalneón

Nube de etiquetasEnlaces de etiquetas de distinto peso que se iluminan al pasar el cursorrellenocontornosuavecristalneón

Avatar con estadoIniciales en un círculo con un punto «en línea» que late suavementerellenocontornocristalneón

Cuenta regresivaDías, horas, minutos y segundos hasta una fecha, avanzando solosrellenocontornosuavecristalneón

Y quince bibliotecas abiertas dentro

Importadas con licencias permisivas, limpias de scripts y direcciones externas, con cada estilo encerrado en su propio elemento.

1104 Botones865 Cargadores622 Tarjetas248 Interruptores215 Campos169 Casillas131 Formularios103 Patrones96 Opciones49 Sugerencias38 input37 button35 motion30 dropdown27 footers25 menus23 menu23 select23 tooltip22 Avisos22 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 Maquetación6 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

Fuentes:Uiverse · MIT · 3348daisyUI · 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

Pon una pieza en tu página

En el constructor: abre una sección, pulsa «Componentes» o «Biblioteca», elige una tarjeta y pulsa insertar. Al quitarla el documento vuelve byte a byte.