Este ejemplo utiliza solo los controles del generador. Las imágenes de arriba muestran hojas de estilo descargadas reales aplicadas a botones HTML ordinarios, no capturas de pantalla del editor.
Abrir el Generador de botones CSS
Comenzar con Signature
Abre el Generador de botones CSS. En Presets, elige Signature de la colección Everyday. Establece el texto del botón en “Get started”. En el área de código, establece el nombre de la clase en cta-button.
Un ajuste preestablecido reemplaza los estilos predeterminados y de cursor, mientras que tu etiqueta y nombre de clase permanecen. Elige tu punto de partida antes de realizar ajustes detallados.
El nombre de la clase conecta las reglas CSS a tu botón HTML. El generador limpia los caracteres no admitidos; usa un nombre corto y distintivo para evitar dar estilo a elementos no relacionados.
Crear la píldora con degradado
Mantén el estado de edición en Default. En Text, elige System sans, tamaño de fuente 18 px y peso Bold. Mantén el color de texto blanco, estilo normal, alineación centrada y altura de línea 1.4.
En Fill, selecciona Linear gradient. Usa los dos colores y el ángulo a continuación. Establece el relleno horizontal en 32 px y el relleno vertical en 16 px. En Shape, mantén Link all corners habilitado y establece el radio de esquina en 100 px. El ancho del borde permanece en 0 px.
En Shadow, mantén Box shadow habilitado. Usa un desplazamiento horizontal de 0 px, desplazamiento vertical de 8 px, desenfoque de 24 px, extensión de −4 px, color #460BD8 y opacidad 32%. Deja Inset shadow y Text shadow desactivados.
El relleno cambia el espacio alrededor del texto. El radio de esquina cambia el contorno. Un radio grande crea esta forma de píldora sin hacer que la etiqueta sea más ancha.
Dar al cursor su propio tratamiento
Cambia el estado de edición a Hover. En Fill, cambia el color de fondo a #33099E y el segundo color a #6D20BF. Mantén el ángulo de degradado en 135°. En Shadow, cambia el desplazamiento vertical a 10 px y el desenfoque a 28 px. Deja los otros ajustes sin cambios.
Usa los botones Default, Hover y Active del lienzo para inspeccionar cada estado. También puedes pasar el cursor o presionar el botón de vista previa. Cambia el lienzo entre claro y oscuro para revisar su borde y sombra.
El estado de edición elige qué estilos cambias. El estado del lienzo solo cambia lo que previsualizas. Regresa a la edición Default antes de ajustar la apariencia en reposo.
Las propiedades de cursor que aún coinciden con el valor predeterminado siguen las ediciones predeterminadas posteriores. Una vez que personalizas una propiedad de cursor, esta permanece independiente. Vuelve a comprobar ambos estados después de cambiar el estilo base.
Exportar y probar en tu página
Selecciona la pestaña CSS y usa Copy CSS, o elige Download para guardar cta-button.css. Selecciona la pestaña HTML y copia el marcado del botón correspondiente. El HTML incluye el mismo nombre de clase y un botón con type="button".
Añade el CSS a tu hoja de estilos, o vincula el archivo descargado desde tu página. Coloca el HTML donde pertenece el botón. Las dos exportaciones funcionan juntas: un botón HTML por sí solo no incluye su estilo.
Abre la página y prueba sus estados predeterminado, de cursor, de enfoque de teclado y presionado. La exportación incluye un contorno focus-visible, un pequeño movimiento activo y una regla de movimiento reducido. Tus estilos circundantes y las fuentes instaladas aún pueden afectar el resultado.
El botón generado es un control con estilo. Conecta su comportamiento de clic en tu proyecto; usa el tipo de botón correcto al añadirlo a un formulario.
cta-button.css
El nombre del archivo descargado sigue el nombre de la clase.
Preguntas frecuentes
¿Necesito un marco de trabajo CSS?
No. El resultado es CSS estándar más un botón HTML simple. Pega el CSS en tu propia hoja de estilos y usa la clase correspondiente en el botón.
¿La descarga guarda también el HTML?
La descarga guarda un archivo .css nombrado según la clase. Copia el marcado del botón por separado desde la pestaña HTML.
¿Puedo darle a cada esquina un radio diferente?
Sí. En Shape, desactiva Link all corners, luego establece Top left, Top right, Bottom right y Bottom left de forma independiente. Este ejemplo los mantiene vinculados para una forma de píldora.
¿Seguirá estando mi diseño la próxima vez?
El estudio intenta guardar el borrador actual en el almacenamiento local de este navegador. No es una cuenta ni una copia de seguridad entre dispositivos. La configuración del navegador, borrar los datos del sitio o restablecer pueden eliminarlo o reemplazarlo, así que exporta el trabajo que desees conservar.
¿Se sube mi botón a un servidor?
La vista previa de estilo y la generación de CSS/HTML se ejecutan en tu navegador. El editor no sube el texto de tu botón ni el borrador de estilo para crear la exportación.
Dale a tu próximo botón su propio estilo.
Elige un punto de partida, ajusta los detalles y lleva el código a tu proyecto.