Generador de botones CSS

Crea un botón de texto con HTML y CSS. Edita su forma y colores, observa el control nativo o un estado simulado y copia el código.

Vista previa

Las sombras grandes pueden recortarse en la vista previa; el CSS copiado no cambia.

Botón y estados

Introduce texto literal y una clase. Edita cada estado exportado.

Texto del botón

Clase

Tipografía

Tamaño de letra (px)

12–32 px

Grosor

Relleno horizontal (px)

0–64 px

Relleno vertical (px)

0–32 px

Ancho del borde (px)

0–8 px

Radio de esquina (px)

0–64 px

Estado que editar

Fondo

Texto

Borde

Usar sombra

Sombra compartida

Desplazamiento horizontal (px)

-32–32 px

Desplazamiento vertical (px)

-32–32 px

Desenfoque (px)

0–48 px

Expansión (px)

-16–16 px

Color de sombra

Exportar botón deshabilitado

Código del botón

El botón exportado está habilitado.

Modo de vista previa

Fondo de vista previa

Normal: 5,17:1 Cumple la referencia 4.5:1

Al pasar el cursor: 6,70:1 Cumple la referencia 4.5:1

Pulsado: 8,72:1 Cumple la referencia 4.5:1

Deshabilitado: 3,90:1 Los controles inactivos están exentos de este requisito de contraste de texto.

Contorno de foco frente al fondo: 5,17:1

La referencia supone 16 px y grosor 600; objetivo 4.5:1.

El contorno utiliza una referencia de 3:1 frente al fondo seleccionado.

Las relaciones de colores sólidos no certifican la accesibilidad. Comprueba el foco, los estilos del entorno y el uso real.

Estado y contraste

Primer plano #FFFFFF sobre fondo #2563EB.

Luminancia relativa: primer plano 1.000000, fondo 0.153152.

(más claro + 0,05) / (más oscuro + 0,05) = 5,17:1.

La referencia supone 16 px y grosor 600; objetivo 4.5:1.

Pulsado sustituye a Hover; focus-visible añade un contorno independiente.

La relación mostrada está redondeada; la comparación utiliza el valor sin redondear.

HTML

<button type="button" class="generated-button" dir="auto">Guardar cambios</button>

CSS

button.generated-button {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 20px;
  border: 1px solid #2563EB;
  border-radius: 8px;
  background-color: #2563EB;
  background-image: none;
  color: #FFFFFF;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  text-shadow: none;
  vertical-align: middle;
  opacity: 1;
  cursor: pointer;
  box-shadow: none;
}

button.generated-button:hover:not(:disabled) {
  background-color: #1D4ED8;
  color: #FFFFFF;
  border-color: #1D4ED8;
  box-shadow: none;
}

button.generated-button:active:not(:disabled) {
  background-color: #1E40AF;
  color: #FFFFFF;
  border-color: #1E40AF;
  box-shadow: none;
}

button.generated-button:focus-visible:not(:disabled) {
  outline: 3px solid #2563EB;
  outline-offset: 3px;
}

button.generated-button:disabled {
  background-color: #E5E7EB;
  color: #6B7280;
  border-color: #9CA3AF;
  box-shadow: none;
  cursor: default;
}

El texto y los estilos permanecen en este navegador; la copia es explícita.

Diseña, comprueba y copia

Introduce texto literal y una clase admitida. Elige tipografía, tamaño, grosor, relleno y borde.
Edita los colores y sombras de los estados. Foco cambia solo el contorno. Elige si el botón exportado está deshabilitado.
Usa En directo y Tab para comprobar el foco real. Revisa las indicaciones de contraste y copia HTML y CSS por separado.

Semántica nativa y estados

El HTML usa un botón nativo type="button", una clase y texto literal. No incluye ninguna acción; añádela en tu aplicación.

El cursor y la pulsación pueden coincidir. Pulsado va después y restablece todas las propiedades, incluida una sombra ausente. El foco añade un contorno independiente.

El atributo disabled deshabilita realmente el botón; no es solo un color. Los demás controles siguen disponibles.

Una sola clase limitada mantiene alineados el HTML y los selectores. Se rechazan espacios, puntos, comas y pseudoclases.

Ejemplos de texto y contraste

Guardar <borrador> & "enviar" 🚀 permanece como texto literal. El HTML escapa los signos para que no se cree otro elemento.

El ejemplo usa un azul más oscuro con sombra al pasar el cursor y vuelve al azul sin sombra al pulsar.

Negro sobre blanco tiene contraste 21:1; colores iguales tienen 1:1. Los umbrales dependen del tamaño y grosor y se comparan sin redondear.

Límites de estilo y accesibilidad

Se ofrecen colores sólidos opacos, una forma de sombra compartida y tipografías del sistema. No se generan degradados, animaciones ni acciones.

Los estados simulados no prueban el foco del teclado. Usa En directo; una sombra recortada en la vista previa no cambia el CSS copiado.

El contraste y las dimensiones mínimas de 44 píxeles no certifican accesibilidad. Comprueba el contexto, teclado y tecnologías de asistencia.

Los estilos, el ancho y las fuentes de destino pueden afectar al resultado. El fondo de vista previa no se exporta; el texto deshabilitado tiene una exención.

Edición local

La herramienta no sube datos ni crea historial, enlaces con valores o solicitudes de fuentes remotas. La copia es explícita. Los servicios del sitio y las extensiones son independientes.

Preguntas sobre botones

Pulsado sigue a Hover y define toda la superficie. El contorno focus-visible es independiente.

No. Es una muestra inerte. Usa En directo y Tab para comprobar el foco nativo.

No. El comportamiento lo determina el atributo nativo disabled, no el color.

No. Introduce una clase de hasta 48 caracteres que empiece por una letra ASCII y continúe con letras, dígitos, guiones o guiones bajos.

El texto es literal. Los signos se escapan en el HTML; no se insertan elementos ni controladores.

No. Las relaciones se refieren a colores sRGB opacos y supuestos de tipografía; no certifican el foco ni el uso con teclado.

Cada estado elige su sombra. Si está apagada en Pulsado, se emite none aunque Hover tenga sombra.

No se crea historial ni enlace con datos. El portapapeles recibe solo el código que eliges copiar.

Fuentes

Normas y orientación para botones nativos y sus estados.

Revisado el 13 de noviembre de 2026.

El generador acepta una gramática limitada, no todo CSS válido.

SVG a PNG

Convierte un archivo SVG local o código pegado en PNG, con dimensiones definidas, transparencia y fuentes incluidas.

Abrir herramienta — SVG a PNG

Generador de filtros CSS

Ordena y repite efectos CSS, compara una muestra y copia la declaración exacta.

Abrir herramienta — Generador de filtros CSS

Calculadora de tamaño de fuente fluido

Define el tamaño de fuente para dos anchos de ventana gráfica. Copia el CSS relativo a la raíz y consulta el modelo calculado con los mismos coeficientes exportados.

Abrir herramienta — Calculadora de tamaño de fuente fluido

Generador CSS de border-radius

Edita ocho radios, previsualiza una caja y copia el CSS en píxeles o porcentajes.

Abrir herramienta — Generador CSS de border-radius

Generador CSS Grid

Crea un ejemplo de CSS Grid con pistas, ubicación y áreas con nombre. Previsualiza, copia CSS o HTML y descarga el ejemplo completo.

Abrir herramienta — Generador CSS Grid

Generador CSS Flexbox

Cree un ejemplo de Flexbox con controles de elementos y contenedores, ejes de diseño explícitos, CSS y HTML coincidentes y una descarga local completa del ejemplo.

Abrir herramienta — Generador CSS Flexbox

Generador CSS de sombras de texto

Crea sombras de texto ordenadas, previsualiza texto plano y copia el CSS exacto.

Abrir herramienta — Generador CSS de sombras de texto

Generador de transformación CSS

Redacte transformaciones CSS 2D repetibles, edite px o porcentaje de traducción y origen, inspeccione un cuadro de referencia y copie las declaraciones actuales exactas.

Abrir herramienta — Generador de transformación CSS

Generador de sombras CSS

Crea capas box-shadow ordenadas, previsualiza el resultado y copia el código CSS.

Abrir herramienta — Generador de sombras CSS

Marca de agua en imágenes

Añade texto o un logotipo a las imágenes, revisa los resultados y descarga archivos individuales o un ZIP.

Abrir herramienta — Marca de agua en imágenes

Generador de degradados CSS

Crea degradados lineales o radiales con colores, opacidad y puntos ajustables.

Abrir herramienta — Generador de degradados CSS

Conversor de colores

Convierte valores sRGB HEX, RGB y HSL compatibles con alfa y precisión explícita.

Abrir herramienta — Conversor de colores

Imagen a texto (OCR)

Reconoce texto impreso en PNG o JPEG locales, elige el idioma y revisa o corrige el resultado antes de copiarlo o descargarlo.

Abrir herramienta — Imagen a texto (OCR)

Lector de QR desde imagen

Lee un código QR de un PNG o JPEG local y examina el texto o los bytes sin abrir enlaces.

Abrir herramienta — Lector de QR desde imagen

Comprobador de contraste de colores

Compara los colores del primer plano y del fondo, ajusta la opacidad y comprueba los umbrales numéricos WCAG para texto y detalles esenciales de la interfaz.

Abrir herramienta — Comprobador de contraste de colores

Calculadora de tamaño de impresión y resolución

Calcula el tamaño de impresión, los píxeles necesarios y los PPI efectivos con márgenes o recorte.

Abrir herramienta — Calculadora de tamaño de impresión y resolución

Calculadora de relación de aspecto

Calcula la relación entre anchura y altura o nuevas dimensiones en píxeles fijando un solo lado.

Abrir herramienta — Calculadora de relación de aspecto

Compresor de imágenes

Intenta ajustar un JPEG, PNG o WebP a un tamaño de archivo objetivo, con resultados medidos y reducción opcional de dimensiones.

Abrir herramienta — Compresor de imágenes

HEIC a JPG

Convierte fotos HEIC compatibles en copias JPG a tamaño completo, con calidad y fondo ajustables y descargas verificadas individuales o en ZIP.

Abrir herramienta — HEIC a JPG

Conversor de imágenes

Convierte imágenes PNG, JPEG y WebP localmente, ajusta transparencia, fondo y calidad, y descarga los resultados.

Abrir herramienta — Conversor de imágenes

Creador de collages de fotos

Organiza fotos locales en una cuadrícula y descarga un PNG o JPEG.

Abrir herramienta — Creador de collages de fotos

Girar y reflejar imágenes

Gira o refleja un lote local de imágenes estáticas PNG, JPEG y WebP; revisa y descarga los resultados procesados.

Abrir herramienta — Girar y reflejar imágenes

Recortar imagen

Recorta un JPEG, PNG o WebP local con precisión en píxeles y descarga el resultado en PNG o JPEG.

Abrir herramienta — Recortar imagen

Cambiar tamaño de imagen

Cambia el tamaño de JPG, PNG o WebP en píxeles o porcentaje, revisa y descarga el resultado.

Abrir herramienta — Cambiar tamaño de imagen

Ver todas las herramientas de esta categoría