Estilos de Button CSS

Los botones son una parte importante de cualquier sitio web o aplicación, ya que permiten a los usuarios interactuar con el contenido de una manera clara y accesible. Con CSS podemos dar estilo a los botones para que se adapten al diseño de nuestro proyecto y mejoren la experiencia del usuario.

En este artículo, exploraremos algunos estilos populares de botones CSS y cómo implementarlos en nuestro código.

Botones básicos

Los botones básicos son los más simples y comunes. Consisten en un borde y un fondo con un texto en el centro. Podemos añadir hover effects para que cambien de color o estilo cuando el usuario los pasea por encima.

<button class="btn">Botón básico</button>

<style>
.btn {
  padding: 12px 24px;
  border: 2px solid #000;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.btn:hover {
  background-color: #000;
  color: #fff;
}
</style>

Botones de iconos

Los botones de iconos incluyen una imagen o icono junto con el texto. Son especialmente útiles cuando queremos llamar la atención sobre una acción específica.

<button class="btn icon">Agregar al carrito</button>

<style>
.btn.icon {
  padding-left: 40px;
  background-image: url('icono-carrito.png');
  background-position: 10px center;
  background-repeat: no-repeat;
}

.btn.icon:hover {
  background-color: #000;
  color: #fff;
}
</style>

Botones de gradiente

Los botones de gradiente utilizan un gradiente de color para crear una sensación de profundidad y generar un efecto llamativo. Podemos ajustar los colores del gradiente para adaptarlos a nuestro diseño.

<button class="btn gradient">Botón de gradiente</button>

<style>
.btn.gradient {
  background: linear-gradient(to bottom, #00c6ff, #0072ff);
  color: #fff;
  padding: 12px 24px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.btn.gradient:hover {
  background: linear-gradient(to bottom, #0072ff, #00c6ff);
}
</style>

Botones redondeados

Los botones redondeados se han vuelto muy populares en los últimos años. Son más amigables y suaves visualmente. Podemos redondear los bordes utilizando la propiedad border-radius.

<button class="btn rounded">Botón redondeado</button>

<style>
.btn.rounded {
  padding: 12px 24px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 25px;
  border: 2px solid #000;
}

.btn.rounded:hover {
  background-color: #000;
  color: #fff;
}
</style>

Botones de texto

Los botones de texto son aquellos que parecen un enlace, pero realizan una acción. Son fáciles de implementar y se adaptan a cualquier estilo.

<button class="btn text">Botón de texto</button>

<style>
.btn.text {
  padding: 0;
  background-color: transparent;
  font-size: 16px;
  cursor: pointer;
  border: none;
  text-decoration: underline;
  color: #000;
}

.btn.text:hover {
  color: #00c6ff;
  text-decoration: none;
}
</style>

Botones de toggle o interruptor

Los botones de toggle o interruptor se utilizan para encender o apagar una opción. Son muy populares en las aplicaciones móviles y su estilo se ha adaptado para la web.

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  border-radius: 34px;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  border-radius: 50%;
  transition: .4s;
}

input:checked + .slider {
  background-color: #00c6ff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}
</style>

Conclusión

Los botones son una parte vital de cualquier sitio web o aplicación y su estilo puede afectar significativamente a la experiencia del usuario. En este artículo, hemos explorado algunos estilos populares de botones CSS y cómo implementarlos en nuestro código. Espero que estos ejemplos te inspiren a explorar aún más y crear tus propios estilos de botones.