Iniciar sesión

Botones

Overshoot icon button

Una pastilla pálida con un gran glifo ilustrado estacionado en su extremo izquierdo que tira hacia afuera más allá del borde y regresa al flotar o enfocar.

Cómo usar Overshoot icon button

Una pastilla pálida con un gran glifo ilustrado estacionado en su extremo izquierdo que tira hacia afuera más allá del borde y regresa al flotar o enfocar.

Prueba la vista previa con el cursor y el teclado. Comprueba el foco visible y la composición en pantallas estrechas dentro de tu página. Usa el número de ficha o el identificador cuando pidas el componente a tu agente.

Propiedades: label, accent, slide, springy, radius

¿Qué frameworks están disponibles?

El catálogo incluye estas versiones: react, vue, svelte, astro, html. La vista previa de esta página utiliza React.

¿Cómo accedo a la implementación?

El código, las versiones y los comandos de instalación están disponibles en el panel superior.

Conecta tu agente

Relacionados

2714Expanding icon pillBotonesUn botón de ícono redondo que se extiende hasta convertirse en una píldora etiquetada al pasar el mouse, intercambiando su glifo por una palabra cuando llega un relleno de acento.

Glide swap button

2715Glide swap buttonBotonesUn botón de ancho fijo que desliza su etiqueta por el borde derecho mientras el glifo se desliza hacia el centro, todo ello asentado sobre una repisa de color duro sobre la que cae el botón cuando se presiona.

Label swap slide button

2523Label swap slide buttonBotonesUna píldora con borde que intercambia todo su contenido al pasar el mouse: la fila en reposo se desliza hacia arriba y hacia afuera, mientras que una segunda fila con su propio ícono y color se desliza hacia adentro desde abajo.

Ring halo pill button

2521Ring halo pill buttonBotonesUn botón tipo pastilla que mantiene un espacio claro alrededor de su núcleo de color, llena ese espacio con un anillo de acento iluminado al pasar el mouse o al enfocar el teclado, y se aprieta hacia adentro mientras se presiona.

2485Rocking icon CTABotonesUna píldora de acento sólido cuyo ícono de calendario principal se balancea como un metrónomo al pasar el mouse y, cuando se hace clic, dibuja una marca y cambia el texto a una etiqueta confirmada antes de regresar.

Slide under download button

2513Slide under download buttonBotonesUn botón etiquetado que desliza una bandeja de acción brillante fuera de su placa al pasar el mouse o enfocar, con una flecha de descarga oscilante dentro de la bandeja.