<nav class="navbar">
  <a href="#" class="navbar__link">
    <span class="navbar__icon" data-feather="home"></span>
    <span class="navbar__label">home</span>
  </a>
  <a href="#" class="navbar__link">
    <span class="navbar__icon" data-feather="heart"></span>
    <span class="navbar__label">favorites</span>
  </a>
  <a href="#" class="navbar__link">
    <span class="navbar__icon" data-feather="sliders"></span>
    <span class="navbar__label">settings</span>
  </a>
</nav>

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

$bg_body: #151921;
$bg_navbar: #282d3c;
$ff: "Inter", sans-serif;

body {
  background: $bg_body;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar {
  $bem-block: &;

  background: $bg_navbar;
  border-radius: 10px;
  padding: 7px 20px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);

  &__link {
    text-decoration: none;
    color: rgba(#fff, 0.2);
    padding: 20px 35px;
    display: inline-block;
    transition: 0.2s;
    text-align: center;

    &:hover {
      color: #fff;
      transform: translateY(5px);
    }

    &:hover #{$bem-block}__label {
      opacity: 1;
      transform: translateX(-50%) translateY(5px);
    }
  }

  &__label {
    display: block;
    position: absolute;
    color: #fff;
    background: $bg_navbar;
    padding: 10px 15px;
    text-transform: uppercase;
    text-align: center;
    top: -60px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
    border-radius: 4px;
    font-family: $ff;
    font-weight: 500;
    font-size: 0.875rem;
    transition: 0.4s ease-in-out;
    letter-spacing: 1.2px;
  }
}

feather.replace();