SVG Icon Buttons | Learning Axis

HTML

CSS

<div class="demo">
  <nav class="nav">
    <button class="icon-button">
      <span class="icon-button__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
          <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
        </svg>
      </span>
      <span class="icon-button__tooltip">Home</span>
    </button>
    <button class="icon-button">
      <span class="icon-button__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
          <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" />
        </svg>
      </span>
      <span class="icon-button__tooltip">Search</span>
    </button>
    <button class="icon-button">
      <span class="icon-button__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
          <path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z" />
        </svg>
      </span>
      <span class="icon-button__tooltip">Profile</span>
    </button>
    <button class="icon-button">
      <span class="icon-button__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
          <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" />
        </svg>
      </span>
      <span class="icon-button__tooltip">Settings</span>
    </button>
  </nav>
</div>

:root {
  --light: #fff;
  --dark: #000;
  --background: var(--light);
  --mist: #b4ccd5;
  --radius: 4px;
  --button-size: 60px;
  --transition: 0.2s ease-in-out;
}
body {
  font-family: sans-serif;
  background: var(--background);
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.nav {
  background: var(--light);
  padding: 16px 32px;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  gap: 20px;
}
.icon-button {
  position: relative;
  width: var(--button-size);
  height: var(--button-size);
  border: none;
  background: var(--background);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: scale var(--transition), background var(--transition);
  line-height: 0;
  &:hover,
  &:focus-visible {
    background: var(--mist);
    color: white;
    .icon-button__tooltip {
      transition-delay: 0.4s;
      transform: translateX(-50%) scale(1);
      opacity: 1;
    }
  }
  &:focus-visible {
    box-shadow: 0 0 0 4px var(--light), 0 0 0 8px var(--dark);
    outline: transparent;
  }
  &:active {
    transform: translateY(-2px);
  }
}
.icon-button__tooltip {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  background: var(--dark);
  color: var(--light);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 16px;
  white-space: nowrap;
  pointer-events: none;
  transition: all var(--transition);
  opacity: 0;
  line-height: 1.5;
  &::before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--dark);
    transform: translateX(-50%);
  }
}
.icon-button__icon svg {
  width: 36px;
  height: 36px;
  fill: var(--dark);
}