Español

134 · Diseño y Web

Generador de botones CSS

Diseñe un botón con una vista previa en vivo, verifique su contraste y copie CSS completo.

Tus datos: Esta herramienta procesa su entrada en este navegador. CapyHelp no carga esa entrada para generar su resultado. Detalles de privacidad

#4f46e5
#ffffff

Cómo utilizar el generador de botones CSS

  1. Establece el texto, colores y tamaños.
  2. Elija relleno o contorno y una sombra.
  3. Copie el CSS y agregue class="button" a su enlace o botón.

Botones accesibles

La herramienta muestra el contraste entre el texto y el fondo. Apunte a al menos 4,5:1 para que todos puedan leer la etiqueta. El CSS incluye un esquema de enfoque visible para los usuarios del teclado, que debes conservar.

Ejemplos

Blanco sobre índigo

Contraste 6.3:1

Estilo de contorno

Botón transparente que se llena al pasar el mouse

Preguntas

¿Puedo usarlo en un enlace?

Sí. El CSS funciona en elementos <a> y <button> con class="button".

Traducción automática. Revisar resultados importantes.