Diseña un botón visualmente y obtén el HTML y el CSS para usarlo en tu sitio web. Comienza con un ajuste preestablecido, ajusta la tipografía, los colores, la forma y las sombras, luego previsualiza los estados de interacción antes de exportar.
Explora los ajustes preestablecidos de 44 en las colecciones Everyday, Classic, Shaped, Expressive, Gradients y Elite. Cada ajuste preestablecido es un punto de partida que puedes editar.
Cómo afectan los ajustes preestablecidos a tu diseño
Elige primero, luego ajusta con precisión
Usa la colección de estilos para reducir la galería. Aplicar un ajuste preestablecido reemplaza tanto los estilos predeterminados como los de estado hover, manteniendo el texto y el nombre de clase de tu botón.
Prueba un relleno sólido simple, una esquina con forma, un contorno nítido o un tratamiento más decorativo. Una vez que encuentres una dirección, usa las otras pestañas para que los detalles se ajusten a tu página.
Haz que la etiqueta se sienta bien
Establece el texto del botón, la familia tipográfica, el tamaño, el grosor, el espaciado, la altura de línea, la alineación y el color del texto. Observa cómo se actualiza la etiqueta mientras trabajas.
Ajusta con precisión el texto y el espaciado
Tipografía que se adapta a la acción
El texto contiene los controles de fuente y un segundo campo de texto para el botón. El tamaño de fuente va de 10 a 80 px; las familias enumeradas utilizan fuentes disponibles en el dispositivo del visitante.
Usa una etiqueta corta que describa la acción. En Relleno, el relleno horizontal y vertical añade espacio alrededor sin cambiar el tamaño del tipo. Comprueba las etiquetas más largas en la página donde se usará el botón.
Elige un relleno sólido o degradado
Usa un color de fondo o combina dos colores con un degradado lineal. Los selectores de color y las entradas hexadecimales te permiten trabajar de forma visual o precisa.
Establece los colores y la dirección del degradado
Dos colores, una dirección clara
En Relleno, cambia el estilo de relleno a Degradado lineal para revelar el Segundo color y el Ángulo del degradado. El ángulo va de 0 a 360 grados.
Los campos hexadecimales aceptan un color completo de seis dígitos o una abreviatura de tres dígitos. Prueba la etiqueta blanca o de color contra ambos extremos de un degradado; el estudio no certifica automáticamente el contraste del texto.
Controla el contorno y la profundidad
Ajusta esquinas vinculadas o independientes, el ancho y estilo del borde, las sombras de caja y las sombras de texto. Dale al botón una forma que se adapte a su contexto.
Explora esquinas, bordes y sombras
Desde un rectángulo nítido hasta una píldora suave
En Forma, mantén activado Vincular todas las esquinas para un radio compartido, o desactívalo para configurar cada esquina. Los estilos de borde incluyen sólido, discontinuo, punteado, doble, inset, outset, ridge, groove y ninguno.
En Sombra, establece los desplazamientos horizontal y vertical, el desenfoque, el color y la opacidad. La sombra de caja también tiene extensión y un interruptor de inset. La sombra de texto es independiente, por lo que puedes añadir profundidad a la etiqueta sin cambiar el contorno del botón.
Diseña también la interacción
Edita los estilos Predeterminado y Hover por separado. Previsualiza las apariencias Predeterminado, Hover y Activo, luego compara el botón en lienzos claros y oscuros.
Comprende los estados de edición y previsualización
Dos estilos editables, tres estados de previsualización
El estado de edición elige qué estilo cambian tus controles. Los botones de estado del lienzo solo eligen la previsualización. Pasar el ratón o presionar la previsualización también muestra su interacción.
Los valores de Hover que aún coinciden con el predeterminado siguen las ediciones base hasta que se personalizan. El CSS exportado incluye una regla de hover cuando es necesario, un contorno de enfoque visible, un movimiento activo y una regla de movimiento reducido.
Lleva el CSS a tu proyecto
Copia el CSS generado y el botón HTML correspondiente, o descarga una hoja de estilos. Un nombre de clase mantiene las dos piezas conectadas.
Copia, descarga y guarda tu trabajo
Código simple que puedes usar directamente
Elige un nombre de clase distintivo, copia el CSS de su pestaña, luego copia el botón de HTML. La descarga guarda un archivo .css con el nombre de la clase; no descarga una página web completa.
La previsualización y la generación de código se ejecutan en tu navegador. El estudio intenta recordar un borrador en el almacenamiento local de este navegador; exporta todo lo que quieras conservar. Restablecer devuelve el estudio a su estilo inicial.
Texto y estilos dentro. HTML y CSS fuera.
No es necesario subir nada. JavaScript impulsa el editor en vivo en tu navegador. Copia el HTML y el CSS por separado, o descarga la hoja de estilos CSS. La pila de fuentes generada utiliza fuentes disponibles en el dispositivo del espectador.
