Botones CSS: Dando estilo a los botones

20/07/2023

Los botones CSS son elementos interactivos en una página web que se pueden estilizar utilizando estilos CSS para mejorar su apariencia y comportamiento.

Contenidos del artículo

5. Botones CSS

A continuación se muestra un ejemplo básico de cómo crear un botón con CSS:

HTML:

<button class="my-button">Haz clic aquí</button>

CSS:

.my-button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.my-button:hover {
  background-color: #45a049;
}

.my-button:active {
  background-color: #3e8e41;
}

CodePen example

En este ejemplo, hemos definido una clase .my-button que se aplica al botón en el HTML. Utilizamos propiedades CSS como padding, background-color, color, border, border-radius y cursor para estilizar el botón. También hemos añadido estilos para el estado :hover (cuando el cursor está sobre el botón) y :active (cuando el botón está siendo clicado).

Puedes personalizar los estilos y agregar más efectos según tus necesidades y preferencias. Los botones CSS ofrecen flexibilidad para crear diseños únicos y atractivos en tus páginas web.

5.1. Cómo crear botones de tipo alert

Veamos cómo crear botones de tipo alert, del mismo estilo que los botones de BootStrap.

HTML:

<button class="btn primary">Primary</button>
<button class="btn secondary">Secondary</button>
<button class="btn success">Success</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>

CSS:

.btn {
  border: none; 
  color: white; 
  padding: 14px 28px; 
  cursor: pointer; 
  border-radius: 5px; 
}

.primary {background-color: #007bff;} 
.primary:hover {background: #0b7dda;}

.secondary {background-color: #e7e7e7; color: black;} 
.secondary:hover {background: #ddd;}

.success {background-color: #04AA6D;} 
.success:hover {background-color: #46a049;}

.warning {background-color: #ff9800;} 
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} 
.danger:hover {background: #da190b;}

Ejemplo en CodePen

5.2. Cómo crear botones de tipo outline

Veamos cómo crear botones de tipo outline, del mismo estilo que los botones de BootStrap.

HTML:

<button class="btn primary">Primary</button>
<button class="btn secondary">Secondary</button>
<button class="btn success">Success</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>

CSS:

.btn {
  border: none; 
  color: black; 
  padding: 14px 28px; 
  cursor: pointer; 
  border-radius: 5px; 
}

.primary {background-color: white; border: 2px solid #007bff;} 
.primary:hover {background: #0b7dda; color: white;}

.secondary {background-color: white; border: 2px solid #e7e7e7;} 
.secondary:hover {background: #ddd; color: white;}

.success {background-color: white; border: 2px solid #04AA6D;} 
.success:hover {background-color: #46a049; color: white;}

.warning {background-color: white; border: 2px solid #ff9800;} 
.warning:hover {background: #e68a00; color: white;}

.danger {background-color: white; border: 2px solid #f44336;} 
.danger:hover {background: #da190b; color: white;}

Ejemplo en CodePen

5.3. Cómo crear botones que ocupen el 100% del contenedor

Para que los botones ocupen el 100% de su contenedor podemos agregarles la siguiente clase:

CSS:

.btn-block{
width: 100%;
display: block;
margin-bottom: 5px;
}

Ejemplo en CodePen

5.4. Cómo crear un paginado con CSS

Crear un paginado en CSS implica utilizar estilos para diseñar los elementos que formarán parte de la paginación, como los botones de navegación y los números de página. A continuación se muestra un ejemplo básico de cómo crear un paginado simple utilizando CSS:

HTML:

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a class="active" href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>

CSS:

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 9px 18px;
    text-decoration: none;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a.active:hover {background-color: #397f3b;}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

Ejemplo en CodePen

5.5. Cómo crear migas de pan con CSS

Para crear migas de pan (breadcrumbs) utilizando CSS, puedes guiarte del siguiente código:

HTML:

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Blog</a></li>
  <li><a class="active" href="#">Services</a></li>
</ul>

CSS:

ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb a:link, ul.breadcrumb a:visited {
    text-decoration:none;
    color: black;
}

ul.breadcrumb li a.active {
    color: #4CAF50;
    font-weight: bold;
}
ul.breadcrumb li a.active:hover {
    color: #397f3b;
    font-weight: bold;
}

Ejemplo en CodePen

5.6. Cómo crear botones con iconos

Veamos ahora cómo integrar botones con iconos mediante CSS en nuestra página web. Esto puede resultar interesante para hacer que la interfaz sea más intuitiva y fácil de entender para los usuarios. Puedes guiarte con el siguiente código:

HTML:

<button class="btn primary"><i class="fas fa-exclamation-circle"></i> Primary</button>
<button class="btn secondary"><i class="fas fa-exclamation-circle"></i> Secondary</button>
<button class="btn success"><i class="fas fa-check-circle"></i> Success</button>
<button class="btn warning"><i class="fas fa-exclamation-triangle"></i> Warning</button>
<button class="btn danger"><i class="fas fa-times-circle"></i> Danger</button>

CSS:

.btn {
  border: none; 
  color: white; 
  padding: 14px 28px; 
  cursor: pointer; 
  border-radius: 5px; 
  display: inline-flex;
}

.btn i {
  margin-right: 5px;
}

.primary {background-color: #007bff;} 
.primary:hover {background: #0b7dda;}
.secondary {background-color: #e7e7e7; color: black;} 
.secondary:hover {background: #ddd;}
.success {background-color: #04AA6D;} 
.success:hover {background-color: #46a049;}
.warning {background-color: #ff9800;} 
.warning:hover {background: #e68a00;}
.danger {background-color: #f44336;} 
.danger:hover {background: #da190b;}

Ejemplo en CodePen

Para usar Font Awesome en tu proyecto, necesitas agregar el código de enlace al archivo CSS de Font Awesome en la sección <head> de tu HTML. Por ejemplo:

<head>
  <!-- Otros elementos del head... -->

  <!-- Enlace al archivo CSS de Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

5.7. Cómo crear botones con degradados

Veamos ahora cómo integrar botones con degradados en CSS en nuestra página web, para ello necesitarás tener conocimientos sobre gradientes en CSS. En esta sección, he agregado un efecto degradado a los botones utilizando la propiedad background-image con el valor linear-gradient. Esto crea un gradiente suave que va de un color a otro en la dirección especificada. Puedes ajustar los colores de gradiente y la dirección según tus preferencias de diseño. Puedes guiarte con el siguiente código:

HTML:

<button class="btn primary">Primary</button>
<button class="btn secondary">Secondary</button>
<button class="btn success">Success</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>

CSS:

.btn {
  border: none; 
  color: white; 
  padding: 14px 28px; 
  cursor: pointer; 
  border-radius: 5px; 
  display: inline-block;
  margin: 5px;
}

.primary {background-image: linear-gradient(to right, #007bff, #4ab2e2);} 
.primary:hover {background-image: linear-gradient(to right, #0b7dda, #4ab2e2);}
.secondary {background-image: linear-gradient(to right, #6c757d, #adb5bd);} 
.secondary:hover {background-image: linear-gradient(to right, #848b92, #adb5bd);}
.success {background-image: linear-gradient(to right, #28a745, #56c150);} 
.success:hover {background-image: linear-gradient(to right, #34b556, #56c150);}
.warning {background-image: linear-gradient(to right, #ffc107, #ffda4e);} 
.warning:hover {background-image: linear-gradient(to right, #ffb200, #ffda4e);}
.danger {background-image: linear-gradient(to right, #dc3545, #e0666e);} 
.danger:hover {background-image: linear-gradient(to right, #d32838, #e0666e);}

Ejemplo en CodePen

Recuerda que para usar Font Awesome en tu proyecto, necesitas agregar el código de enlace al archivo CSS de Font Awesome en la sección <head> de tu HTML.

5.8. Cómo crear botones con efecto de pulsación

Veamos ahora cómo integrar botones con efectos de pulsación en CSS, para ello necesitarás tener conocimientos sobre transiciones y transformaciones. En este código, he creado un botón con la clase pulse-effect que representa un botón con efecto de pulsación. Al hacer clic en el botón, se aplicará una transformación que reducirá ligeramente su tamaño, proporcionando un efecto visual de pulsación. La transición suave proporciona una experiencia de usuario agradable y con retroalimentación visual. Puedes ajustar los colores y la duración de la transición según tus preferencias de diseño.

HTML:

<button class="btn pulse-effect">Click me</button>

CSS:

.pulse-effect {
  border: none;
  color: white;
  padding: 14px 28px;
  cursor: pointer;
  border-radius: 5px;
  background-color: #007bff; /* Color base del botón */
  transition: transform 0.3s ease-in-out; /* Transición suave del efecto de pulsación */
}

.pulse-effect:hover {
  background-color: #0056b3; /* Cambia el color al pasar el cursor sobre el botón */
}

.pulse-effect:active {
  transform: scale(0.9); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
}

Ejemplo en CodePen

5.9. Cómo crear botones con efecto de sombra

Veamos ahora cómo insertar botones con efectos de sombras en CSS, para ello necesitarás tener conocimientos sobre sombras en contenedores CSS. En este código, he creado un botón con la clase shadow-effect que representa un botón con efecto de sombra. Al pasar el cursor sobre el botón, se aplicará una sombra sutil que crea profundidad y dimensión en el diseño. La transición suave proporciona una experiencia de usuario agradable. Puedes ajustar la intensidad y el color de la sombra según tus preferencias de diseño.

HTML:

<button class="btn shadow-effect">Hover me</button>

CSS:

.shadow-effect {
  border: none;
  color: white;
  padding: 14px 28px;
  cursor: pointer;
  border-radius: 5px;
  background-color: #007bff; /* Color base del botón */
  transition: box-shadow 0.3s ease-in-out; /* Transición suave del efecto de sombra */
}

.shadow-effect:hover {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* Aumenta el desplazamiento y la opacidad de la sombra */
}

Ejemplo en CodePen

Botones CSS: Dando estilo a los botones

¡Invítanos a un café!

Servicios

Suscríbete a la newsletter