Botones CSS: Dando estilo a los botones

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

4. 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.

4.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

4.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

4.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

4.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

4.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