Cargando...

Botones en CSS

Los botones son los controles de «hazlo» — enviar, guardar, siguiente. CSS puede darles una piel clara y una respuesta honesta al pasar el ratón, pulsar, enfocar o encontrarlos deshabilitados. Mantén el HTML semántico (button o input submit); esta lección trata del aspecto y los estados.

Un kit de botones

📊 Botones de un vistazo

Pieza Trabajo diario
padding + background + border Construir una cara de botón sólida y legible
border-radius Suavizar esquinas (o ir a píldora con radio grande)
:hover / :active Mostrar «soy interactivo» y «estoy pulsado»
:focus-visible Mantener visible el anillo de foco de teclado
:disabled + cursor Atenuar botones no disponibles; cursor de mano cuando se puede hacer clic

Estiliza una .btn compartida (o button) para que las acciones principales coincidan en la página. El padding de campos de texto fue la lección anterior — aquí vestimos los objetivos de clic.

Un botón primario sólido

Empieza con padding cómodo, fondo claro, color de texto legible y border-radius tranquilo. Prefiere font: inherit para que el botón combine con el texto cercano.

Botón primario base

css
CSS Code 
button,
.btn {
display: inline-block;
padding: 0.65rem 1.1rem;
font: inherit;
font-weight: 600;
color: #fff;
background: #0b5fff;
border: 1px solid #0b5fff;
border-radius: 0.5rem;
cursor: pointer;
}

Hover y active — respuesta honesta

:hover puede oscurecer o aclarar un poco la cara. :active debe sentirse pulsado — un tono más oscuro o un pequeño desplazamiento — no un tema neón totalmente nuevo.

Hover y active

css
CSS Code 
button:hover,
.btn:hover {
background: #094fd6;
border-color: #094fd6;
}

button:active,
.btn:active {
background: #0844b8;
border-color: #0844b8;
}

Foco que se ve

Nunca quites estilos de foco sin reemplazo. :focus-visible dibuja un anillo claro para teclado y mantiene los clics del ratón tranquilos.

Anillo de foco visible

css
CSS Code 
button:focus-visible,
.btn:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 3px;
}

Los botones disabled siguen visibles

Un botón deshabilitado debe parecer no disponible — menor opacidad o colores apagados — y rechazar el cursor de mano. No lo ocultes del diseño.

Tono disabled

css
CSS Code 
button:disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #8aa9e8;
border-color: #8aa9e8;
}

Un hábito tranquilo de botón

Mantén una piel primaria, hover/active claros, un anillo de foco visible y disabled atenuado. Las variantes outline/ghost pueden compartir el mismo padding y radio para que el conjunto se sienta relacionado.

Compañero outline

css
CSS Code 
.btn-outline {
color: #0b5fff;
background: transparent;
border: 1px solid #0b5fff;
}

.btn-outline:hover {
color: #fff;
background: #0b5fff;
}

Pruébalo tú

  1. Estiliza un button primario con padding, fondo, color de texto y border-radius.
  2. Oscurece :hover y profundiza :active un poco.
  3. Añade outline :focus-visible — nada de outline: none desnudo.
  4. Atenúa un botón :disabled y pon cursor: not-allowed.
  5. Opcional: añade un .btn-outline hermano que comparta padding y radio.

Errores comunes

  • outline: none sin reemplazo de foco (los usuarios de teclado se pierden)
  • Padding minúsculo que falla en objetivos táctiles móviles
  • Convertir esta lección en estilos de input/textarea (eso fue controles de formulario)
  • Un tema neón salvaje en :hover que rompe la calma de marca
  • Estilizar solo etiquetas a y olvidar los button reales

Resumen

  • Padding, fondo, borde y radio construyen una cara de botón sólida
  • :hover y :active dan respuesta honesta de interacción
  • Mantén un anillo :focus-visible visible
  • Atenúa :disabled; usa cursor: pointer cuando se pueda hacer clic
  • Deja el cromo de campos a controles de formulario; aquí vestimos objetivos de clic

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 34 de 35
Css Tutorial