Plantilla CSS: Botón redondeado (border-radius + background)
📝 Uso previsto
Esta plantilla se utiliza cuando deseas ofrecer un botón visible y atractivo para acciones del usuario. Es lo suficientemente simple para principiantes.
📘 Explicación
Este fragmento de CSS usa border-radius para redondear los bordes y background-color para añadir color. Se puede usar en botones de envío, enlaces, etc.
🔹 Código parcial
<button class="rounded-button">Haz clic</button>
<style>
.rounded-button {
background-color: #28a745;
color: white;
padding: 10px 20px;
border: none;
border-radius: 12px;
font-size: 1rem;
cursor: pointer;
}
</style>
🔸 Código HTML completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Botón redondeado</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.rounded-button {
background-color: #28a745;
color: white;
padding: 10px 20px;
border: none;
border-radius: 12px;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<button class="rounded-button">Haz clic</button>
</body>
</html>
🎯 Técnicas avanzadas de diseño para botones con bordes redondeados
Los botones con bordes redondeados son un elemento fundamental del diseño moderno de interfaces. Esta técnica simple usando border-radius mejora significativamente la usabilidad de la interfaz de usuario.
🌈 Consejos de personalización
Ajustar el valor de border-radius puede cambiar notablemente la impresión que da un botón. Valores pequeños alrededor de 5px son adecuados para diseños más formales, mientras que valores grandes como 25px dan una sensación más amigable. Para crear un botón completamente circular, especifica 50%. Los colores de fondo se pueden cambiar según el caso de uso, como #28a745 (verde), #007bff (azul) o #dc3545 (rojo).
✨ Añadiendo interacción
Añadir estilos :hover y :active a botones básicos hace la interfaz más interactiva. Por ejemplo, .rounded-button:hover { background-color: #218838; transform: scale(1.05); } hace que el botón se oscurezca y aumente ligeramente al pasar el cursor. Añadir la propiedad transition suaviza estos cambios.
📱 Consejos para diseño responsivo
En dispositivos móviles, aumentar el padding del botón (por ejemplo, 15px 30px) facilita el toque. Usar media queries como @media (max-width: 768px) { .rounded-button { padding: 15px 30px; } } es recomendable para ajustes. El tamaño de fuente también puede ajustarse según el ancho de pantalla.
Los botones con bordes redondeados son elementos simples pero efectivos, pero su uso excesivo en una sola página puede reducir su visibilidad. Es mejor limitar su uso a botones de acción clave o elementos realmente importantes.