Botones

Morphing backdrop button

Una etiqueta de texto simple respaldada por una losa de color y un disco de esquina translúcido que se hincha y se cuadra en una nueva cara del botón al pasar el mouse.

Cómo usar Morphing backdrop button

Una etiqueta de texto simple respaldada por una losa de color y un disco de esquina translúcido que se hincha y se cuadra en una nueva cara del botón al pasar el mouse.

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, discSize, duration, offset

¿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

2671Shrink to icon buttonBotonesUna cápsula ancha con etiquetas que se estrecha hasta convertirse en un botón de icono redondo al pasar el cursor o al enfocar mientras la etiqueta se sale del marco y el icono aparece volando.

2707Amber upload pillBotonesUna cálida pastilla de carga en degradado con un borde brillante que amplía su tono de color e ilumina la etiqueta desde atrás al pasar el mouse.

2601Arrow relay badge pillBotonesUn botón de pastilla con una insignia redonda izquierda cuya flecha sale por la esquina superior al pasar el mouse, mientras que una nueva llega desde abajo y el cuerpo se vuelve casi negro.

2469Arrow to label pillBotonesUn botón redondo de chevrón que se extiende hasta convertirse en una píldora ancha etiquetada al pasar el cursor, intercambiando la marca por una palabra mientras el relleno plano se convierte en una rampa de dos paradas.

2683Arrow wipe buttonBotonesUn botón de pastilla cuya placa decorativa, cortada en forma de punta de flecha, se desplaza desde la izquierda al pasar el mouse e invierte la etiqueta letra por letra a medida que su punta se cruza.

1629Arrow wipe call to actionBotonesUna llamada a la acción cuya placa más oscura aparece desde la izquierda al pasar el mouse mientras una flecha escondida se desliza hacia afuera para encontrarse con la etiqueta y empuja un píxel hacia abajo cuando se hace clic.