Cómo crear: navegación en forma de píldora

Aprende cómo usar CSS para crear menús de navegación en forma de píldora.

Navegación en forma de píldora

Prueba personalmente

Crear navegación en forma de píldora

Primer paso - Añadir HTML:

<div class="pill-nav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

Segundo paso - Añadir CSS:

/* Establecer el estilo de los enlaces en el menú de navegación en forma de píldora */
.pill-nav a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;
}
/* Cambiar el color del enlace al pasar el ratón */
.pill-nav a:hover {
  background-color: #ddd;
  color: black;
}
/* Añadir color al enlace activo/actual */
.pill-nav a.active {
  background-color: dodgerblue;
  color: white;
}

Prueba personalmente

Navegación en forma de píldora vertical

Añadir display: block a los enlaces, se mostrarán verticalmente en lugar de horizontalmente:

Prueba personalmente

Páginas relacionadas

Tutoriales:Barra de navegación CSS

Tutoriales:¿Cómo crear una barra de navegación superior?