Colección de variantes de botones: primario, secundario, outline, ghost y danger. Con estados hover y disabled.
Descripción
El Sistema de botones de Kodeval Pages te da botones ya armados para tu página. Sirven desde para la acción más importante hasta para acciones que borran cosas. Todo está hecho con HTML y CSS puro, sin nada más que instalar.
El sistema tiene 5 tipos de botón: primario, secundario, outline, ghost y danger (peligro). Cada uno se usa en un momento distinto y ayuda al usuario a entender qué tan importante o riesgosa es cada acción con solo mirar el botón.
El botón primario es para la acción más importante de cada sección o formulario. Usa el color principal de tu proyecto. Poné solo uno por bloque de contenido, así el usuario ve clara cuál es la acción más importante y no se marea con muchos botones igual de fuertes.
El botón secundario acompaña al primario cuando necesitás dos opciones distintas pero parecidas en importancia. Usa un color más neutro, para que no llame tanto la atención como el primario.
El botón outline no tiene fondo, solo un borde visible (fondo transparente). Es ideal para ponerlo al lado de un botón primario, como una opción secundaria más discreta. Al ser tan simple, no le quita atención al botón principal.
El botón ghost no tiene fondo ni borde mientras nadie lo toca, así que casi no se ve. Recién se nota cuando el usuario pasa el mouse o hace clic. Usalo para acciones poco importantes, como cancelar, cerrar o volver atrás: tienen que estar ahí, pero sin destacarse.
El botón danger (peligro) es rojo para avisar que la acción no se puede deshacer o puede traer problemas. Usalo solo para eliminar, borrar o desactivar algo para siempre. Es buena idea agregarle una ventana que te pregunta "¿estás seguro?" antes de confirmar, así evitás que alguien lo apriete sin querer.
También hay tres tamaños de botón: chico (clase btn-sm), normal y grande (clase btn-lg). Así adaptás el botón al lugar donde lo usás, sin tener que inventar clases nuevas. El chico sirve en espacios ajustados, como tablas o menús laterales. El grande funciona bien en la parte principal de la página, donde querés un botón bien visible para que el usuario haga algo.
El estado disabled (deshabilitado) se activa con el atributo HTML disabled o con la clase .disabled — podés usar cualquiera de los dos. Cuando está activo, el botón se ve más transparente, el cursor cambia a uno de "no permitido" y dejás de poder hacerle clic. Así el usuario entiende que esa acción no está disponible en ese momento.
Todos los botones parten de una clase base llamada .btn, que junta los estilos que comparten todos: tamaño, espaciado interno, tipografía, bordes redondeados y animaciones suaves. Las clases de cada variante (btn-primary, btn-danger, etc.) solo cambian los colores. Por eso es fácil agregar variantes nuevas.
Podés agregar íconos escribiéndolos directo adentro del botón, usando símbolos como flechas (↗, ↓) que ya existen en el teclado (se llaman caracteres Unicode). No hace falta instalar ninguna librería de íconos. La propiedad gap (una propiedad de flexbox, que ordena elementos en fila o columna) deja un espacio automático entre el ícono y el texto.
Arriba del archivo CSS hay variables CSS dentro de :root (valores que definís una vez y reutilizás en todo el archivo). Cambiando esos valores podés personalizar todos los colores y el redondeado de los bordes, sin tocar el resto del código. Así adaptás el sistema de botones a los colores de tu propio proyecto fácilmente.
Para usarlo, copiá el bloque HTML de más abajo y pegalo en tu archivo .html donde quieras mostrar los botones. Copiá el bloque CSS y pegalo en tu archivo .css (o dentro de una etiqueta <style>) para que los botones se vean bien.
<!-- Primario --> <button class="btn btn-primary">Acción principal</button> <!-- Secundario --> <button class="btn btn-secondary">Acción secundaria</button> <!-- Outline --> <button class="btn btn-outline">Ver más</button> <!-- Ghost --> <button class="btn btn-ghost">Cancelar</button> <!-- Danger --> <button class="btn btn-danger">Eliminar</button> <!-- Tamaños --> <button class="btn btn-primary btn-sm">Pequeño</button> <button class="btn btn-primary">Normal</button> <button class="btn btn-primary btn-lg">Grande</button> <!-- Disabled --> <button class="btn btn-primary" disabled>Deshabilitado</button> <!-- Con ícono (Unicode) --> <button class="btn btn-primary">↗ Compartir</button> <button class="btn btn-outline">↓ Descargar</button>
/*
|--------------------------------------------------------------------------
| Sistema de Botones — Kodeval Pages
|--------------------------------------------------------------------------
| Colección de variantes de botones: primario, secundario, outline,
| ghost y danger. Incluye tamaños y estado disabled.
| Sin dependencias externas.
|--------------------------------------------------------------------------
*/
/* =====================
VARIABLES
Cambiá los colores para adaptar el sistema a tu proyecto.
===================== */
:root {
--btn-primary-bg: #5865f2;
--btn-primary-text: #ffffff;
--btn-secondary-bg: #1e293b;
--btn-secondary-text:#f8fafc;
--btn-outline-border:#5865f2;
--btn-outline-text: #5865f2;
--btn-ghost-text: #64748b;
--btn-danger-bg: #ef4444;
--btn-danger-text: #ffffff;
--btn-radius: 10px;
--btn-font-size: 0.9rem;
--btn-font-weight: 600;
--btn-transition: 0.15s ease;
}
/* =====================
BASE
Todos los botones comparten estos estilos.
El selector .btn aplica a todos.
===================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.7rem 1.4rem;
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
font-family: inherit;
border-radius: var(--btn-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition:
background var(--btn-transition),
color var(--btn-transition),
border-color var(--btn-transition),
opacity var(--btn-transition);
line-height: 1;
}
/* =====================
PRIMARIO
El botón más importante de la interfaz.
Usalo para la acción principal de cada sección.
===================== */
.btn-primary {
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
border-color: var(--btn-primary-bg);
}
.btn-primary:hover { opacity: 0.85; }
/* =====================
SECUNDARIO
Para acciones importantes pero no las principales.
===================== */
.btn-secondary {
background: var(--btn-secondary-bg);
color: var(--btn-secondary-text);
border-color: var(--btn-secondary-bg);
}
.btn-secondary:hover { opacity: 0.85; }
/* =====================
OUTLINE
Fondo transparente con borde de color.
Útil al lado de un botón primario.
===================== */
.btn-outline {
background: transparent;
color: var(--btn-outline-text);
border-color: var(--btn-outline-border);
}
.btn-outline:hover {
background: rgba(88,101,242,0.08);
}
/* =====================
GHOST
Sin fondo ni borde visible. Para acciones secundarias
como cancelar o cerrar.
===================== */
.btn-ghost {
background: transparent;
color: var(--btn-ghost-text);
border-color: transparent;
}
.btn-ghost:hover {
background: rgba(0,0,0,0.05);
color: #0f172a;
}
/* =====================
DANGER
Para acciones destructivas: eliminar, borrar, desactivar.
Usalo con cuidado — solo cuando la acción sea irreversible.
===================== */
.btn-danger {
background: var(--btn-danger-bg);
color: var(--btn-danger-text);
border-color: var(--btn-danger-bg);
}
.btn-danger:hover { opacity: 0.85; }
/* =====================
TAMAÑOS
Ajustan el padding y el font-size.
===================== */
.btn-sm {
padding: 0.45rem 0.9rem;
font-size: 0.78rem;
}
.btn-lg {
padding: 0.95rem 2rem;
font-size: 1rem;
}
/* =====================
ESTADO DISABLED
Aplica automáticamente cuando el elemento tiene
el atributo disabled o la clase .disabled.
===================== */
.btn:disabled,
.btn.disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}