En diseño web, los botones juegan un papel crucial en la experiencia del usuario. Entre los diferentes estilos disponibles, los botones con estilo outline se han convertido en una opción popular por su estética minimalista y moderna. En este artículo, exploraremos qué son, cuándo y por qué usarlos, y cómo crearlos con HTML y CSS puro, así como con Bootstrap.
¿Qué son los botones con estilo outline?
Los botones con estilo outline son aquellos que tienen un borde visible pero no un fondo sólido. En su estado normal, suelen ser transparentes o del color del fondo de la página, y solo muestran el borde y el texto. Sin embargo, al pasar el cursor sobre ellos o al hacer clic, pueden cambiar de color o volverse más prominentes.
Este estilo se logra principalmente utilizando border y background: transparent en CSS.
¿Cuándo y por qué usar botones outline?
Los botones con estilo outline son ideales cuando se quiere:
- Diseño limpio y moderno: se ven más elegantes y sutiles en comparación con botones sólidos.
- Menos peso visual: perfectos para aportar minimalismo al sitio.
- Resaltar interacciones: con efectos de
hoveryfocus, pueden atraer la atención sin ser invasivos. - Mejor integración con el fondo: son ideales en diseños simples o sobre fondos con imágenes o degradados.
Cómo crear botones outline con HTML y CSS puro
Veamos cómo crear un botón con estilo outline utilizando solo HTML y CSS. Para este ejemplo he preparado el código HTML y CSS integrado en un solo archivo y sin utilizar librerías externas. El ejemplo de código es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botón Outline con CSS</title>
<style>
.btn-outline {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
color: #3498db;
border: 2px solid #3498db;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-outline:hover {
background: #3498db;
color: white;
}
</style>
</head>
<body>
<button class="btn-outline">Botón Outline</button>
</body>
</html>Explicación de los estilos empleados:
border: 2px solid #3498db;→ Define el borde del botón.background: transparent;→ Mantiene el fondo transparente.color: #3498db;→ Aplica color al texto.transition: all 0.3s ease;→ Suaviza el cambio de color al hacer hover.:hover→ Cambia el color de fondo y del texto cuando el usuario pasa el cursor.
Cómo crear botones outline con Bootstrap
Bootstrap facilita mucho la creación de botones con estilo outline. Para ello, simplemente utilizamos las clases btn y btn-outline-*.
En la documentación oficial podemos ver como se crean botones con Bootstrap. A continuación un ejemplo de como lucen los botones outline usando esta librería:
Ahora veamos un ejemplo personalizado para crear botones con Bootstrap:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botón Outline con Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-outline-primary">Botón Outline</button>
<button class="btn btn-outline-success">Éxito</button>
<button class="btn btn-outline-danger">Error</button>
</body>
</html>Para que el código anterior funcione, debe ubicarse el archivo bootstrap.min.css en la carpeta css del proyecto o incluirse el vínculo al archivo vía CDN. Los detalles para acceder a este archivo se encuentras disponibles en la página principal de Bootstrap.
A continuación la explicación de las clases utilizadas para que los botones adopten los estilos:
btn→ Clase base de los botones de Bootstrap.btn-outline-primary→ Crea un botón con un borde y texto del color primario.btn-outline-success→ Mismo efecto pero con color verde.btn-outline-danger→ Variante en rojo.
Al hacer hover, los botones se rellenan con el color correspondiente automáticamente, sin necesidad de CSS adicional.
En conclusión
Los botones con estilo outline son una excelente opción para mantener un diseño moderno y limpio. Son útiles cuando queremos resaltar opciones secundarias sin quitar protagonismo a las acciones principales.
Si necesitamos control total sobre el diseño el CSS puro nos brinda una versatilidad total. Si buscamos una implementación rápida, elegante y responsive Bootstrap es una alternativa muy eficaz.
Si te interesa saber más sobre Bootstrap y diseño web déjame un comentario o escríbeme un mensaje.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta