Usa el Generador de Estilos para Botones gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Diseña un Botón en el Que la Gente Quiera Hacer Clic
Los botones llevan el trabajo más importante de una página: convierten a un lector en una acción. Un botón bien diseñado es fácil de ver, fácil de leer y claramente clicable. Un botón débil se esconde en la composición, confunde la vista o parece texto simple. La herramienta de arriba te permite dar forma a un botón con relleno, radio de esquina, sombra y color al pasar el cursor, y luego copiar el CSS terminado.
Empieza con las palabras. Un botón debe decir qué pasa después: Consigue la Guía, Empieza Gratis, Descarga Ahora. Etiquetas vagas como Haz Clic Aquí o Enviar obligan al lector a adivinar, y adivinar cuesta clics. Mantén la etiqueta corta, empieza con un verbo, y usa el mismo estilo para el mismo tipo de acción en todo tu sitio.
Relleno: Dale Espacio a la Etiqueta
El relleno es el espacio dentro del botón alrededor de las palabras. Un relleno generoso hace que un botón se sienta seguro y fácil de tocar, sobre todo en teléfonos, donde los objetivos de toque pequeños frustran los dedos. Un buen punto de partida es 14 píxeles en vertical y 28 píxeles en horizontal para un botón estándar, con más para una llamada a la acción principal.
El relleno también marca la jerarquía del botón. Tu acción principal recibe el mayor relleno; las acciones secundarias reciben menos. Cuando cada botón de una página tiene el mismo tamaño, nada destaca. Cuando la acción principal es claramente más grande, el ojo la encuentra primero y la página se siente guiada en lugar de desordenada.
Radio y Sombra: Forma y Profundidad
El radio de esquina marca la personalidad. Las esquinas afiladas se sienten técnicas y formales; las esquinas ligeramente redondeadas se sienten amables y modernas; los botones totalmente redondeados en forma de píldora se sienten juguetones y casuales. Haz que el radio coincida con tu marca y mantenlo coherente: mezclar botones afilados y en forma de píldora en una página parece accidental.
La sombra levanta el botón de la página y señala que se puede pulsar. Una sombra suave y corta sirve para la mayoría de los diseños. Una sombra larga y oscura se ve pesada y anticuada, mientras que ninguna sombra puede hacer que un botón se mezcle con un fondo de color. El control de la herramienta te permite encontrar el punto en el que el botón se levanta sin salir flotando.
Color al Pasar el Cursor: El Momento de Respuesta
El color al pasar el cursor es la forma en que el botón responde al cursor. Cuando llega el puntero, el botón debe cambiar de forma visible: un tono ligeramente más oscuro o más claro del mismo color es la elección más segura. Un color al pasar el cursor sin relación con el color normal se siente como un fallo, y ningún cambio al pasar el cursor deja a los usuarios de escritorio sin saber si el elemento se puede pulsar.
Recuerda que el paso del cursor no existe en pantallas táctiles, así que el estado normal ya debe leerse como un botón sin él. El contraste de color, el relleno y la sombra hacen ese trabajo en el móvil. Prueba tu botón en un teléfono además de en un escritorio: si solo parece un botón cuando pasas el cursor, los visitantes móviles lo pasarán por alto.
Copia el CSS y Mantén la Coherencia
Pulsa Copiar CSS y pega el código en tu hoja de estilos. El código incluye el estado normal y el estado al pasar el cursor, así que ambos viajan juntos. Aplica la misma clase a cada botón de ese tipo, y define como máximo tres estilos de botón para un sitio: principal, secundario y discreto. Más de tres y el lenguaje visual se fragmenta.
Comprueba el contraste antes de publicar. El texto del botón debe ser legible contra el color del botón para todos los usuarios, incluidos los usuarios con baja visión. El texto blanco sobre turquesa, el texto oscuro sobre amarillo y el texto blanco sobre azul oscuro suelen pasar; el texto gris claro sobre un color pálido suele fallar. Un verificador de contraste lleva diez segundos y evita un botón que nadie puede leer.
Por último, prueba el botón en su lugar. Un botón que se ve fuerte solo puede desaparecer junto a una imagen llamativa o chocar con un botón vecino. Colócalo en la composición real, compruébalo en un teléfono, y confirma que la etiqueta siga leyéndose de un vistazo. El mejor estilo de botón es el que sobrevive al contacto con la página real.
Herramientas relacionadas
- Button Style Generator (English version)
- Vista Previa de Bordes Redondeados
- Texto Neón Online Gratis