Cómo crear: Botón de icono

Cómo crear un botón de icono

Paso 1 - Añadir HTML:

Añadir biblioteca de iconos, por ejemplo Font Awesome, y adjuntar iconos a los botones HTML:

<!-- Añadir biblioteca de iconos -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Añadir iconos Font Awesome a los botones -->
<p>Botones de icono:</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>
<p>Botones de icono con texto:</p>
<button class="btn"><i class="fa fa-home"></i> Inicio</button>
<button class="btn"><i class="fa fa-bars"></i> Menú</button>
<button class="btn"><i class="fa fa-trash"></i> Papelera</button>
<button class="btn"><i class="fa fa-close"></i> Cerrar</button>
<button class="btn"><i class="fa fa-folder"></i> Carpeta</button>

Segundo paso - Añadir CSS:

/* Establecer el estilo del botón */
.btn {
  background-color: DodgerBlue; /* Fondo azul */
  border: none; /* Eliminar el borde */
  color: white; /* Texto en blanco */
  padding: 12px 16px; /* Algunos márgenes internos */
  font-size: 16px; /* Establecer el tamaño de la fuente */
  cursor: pointer; /* Puntero del ratón al pasar el ratón */
}
/* Al pasar el ratón sobre el fondo se oscurece */
.btn:hover {
  background-color: RoyalBlue;
}

Prueba personalmente

Páginas relacionadas

Tutoriales:Tutoriales de iconos

Tutoriales:Botones CSS