LocalToolsColección de herramientas offline para el navegador

Categoría: Desarrollo

Generador de botones CSS

Idea propia¿Falta una herramienta?

Crea botones CSS personalizables con vista previa y código listo para copiar

Diseña un botón visualmente y copia HTML y CSS limpios. Ajusta colores, borde, radio, espaciado, sombra y estilos de hover y foco en tu navegador.

Hover y foco

Vista previa

Pasa el cursor por la vista previa, o pulsa Tab para llegar a ella, y verás los estilos de hover y de foco.

HTML
<button class="button" type="button">Get started</button>
CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid #2f6f4f;
  border-radius: 6px;
  background: #2f6f4f;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
  background: #255a40;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
}

.button:active {
  transform: translateY(0);
}

/* Keyboard focus stays visible — never replace this with outline: none */
.button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover {
    transform: none;
  }
}

El fragmento usa un <button> real y mantiene visible el contorno de :focus-visible. Quitar ese contorno dejaría a quien navega con teclado sin saber dónde está.

La vista previa y el código generado se construyen en tu navegador.

Todo lo de esta página se procesa en tu navegador. No se sube nada.

Para qué sirve

Este es un editor visual para un botón: colores, borde, radio, relleno, tamaño y grosor de la tipografía, sombra y qué cambia al pasar el cursor. La vista previa se estiliza con el mismo CSS que copias, así que pasar el cursor o llegar con el tabulador muestra los estados reales, no una aproximación. Dos cosas no se dejan al azar. El marcado es un `<button type="button">` de verdad, no un div con estilo, así que recibe el foco y se maneja con teclado sin esfuerzo. Y la salida siempre conserva un contorno visible de `:focus-visible`: el error de accesibilidad más común en el CSS de botones generado es un `outline: none` que deja a quien navega con teclado sin saber dónde está en la página.

Cómo se usa

  1. Escribe el texto y el nombre de clase, y elige los colores de fondo, texto y borde.
  2. Ajusta radio, grosor del borde, relleno y tamaño y grosor de la fuente hasta que la vista previa te guste.
  3. Define el fondo de hover y el anillo de foco, y copia el HTML y el CSS.

Privacidad

Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.

Preguntas frecuentes

¿Puedo crear estilos de hover?
Sí. El fondo de hover, la elevación opcional y el cambio de sombra forman parte del CSS generado, como una regla :hover aparte que puedes editar después.
¿El botón necesita JavaScript?
No. La salida es HTML y CSS puros. Solo necesitas script para lo que el botón haga al pulsarlo.
¿Puedo copiar el HTML y el CSS por separado?
Sí: cada uno tiene su propio botón de copia, así que puedes llevar el CSS a una hoja de estilos y el marcado a donde corresponda.
¿Por qué el CSS incluye un contorno de foco?
Porque sin él, quien navega con teclado no puede ver en qué control está. La regla generada usa :focus-visible, así que el anillo aparece con el foco de teclado sin salir en cada clic de ratón.
¿El código generado es local?
Sí. Todos los ajustes, la vista previa y los fragmentos generados se quedan en tu navegador.

Volver a todas las herramientas