<!-- This pen was inspired by an image on CallToInspiration's buttons page. I do not know the original source: https://calltoinspiration.com/buttons -->

<nav class="chunky-toggle">
	<div class="wrapper">
    <button class="active"><span>1</span></button>
		<button><span>2</span></button>
		<button><span>3</span></button>
	</div>
</nav>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
  background: repeating-linear-gradient(
    -45deg,
    #fff,
    #DDE8F7 2px,
    #DDE8F7 12px
  );
}

.chunky-toggle {
  padding: 8px;
  background-image: linear-gradient(to bottom, #eaf3fc, #aebfd2);
  border-radius: 15px;
  position: relative;

  .wrapper {
    display: flex;
    column-gap: 5px;
    padding: 8px;
    background: #1c2636;
    border-radius: 12px;

    button {
      border: 0;
      padding: 15px;
      cursor: pointer;
      background-image: linear-gradient(to bottom, #2f3647, #1b2536);
      border-radius: 10px;
      position: relative;
      border-top: 2px solid rgba(255, 255, 255, 0.2);
      transition: transform 100ms;
      transform: translateY(-3px);
      box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.5);
    }

    button:before {
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 8px;
      position: absolute;
      top: 6px;
      left: 6px;
      background: #0f1722;
    }

    button.active {
      background-image: linear-gradient(to top, #2f3647, #1b2536);
      border-top: 2px solid #1c2636;
      transform: translateY(3px);
      box-shadow: none;
    }

    button.active:before {
      background: #03ffd2;
      box-shadow: 0px 0px 20px 1px #03ffd2;
    }
    
    button:focus-visible {
      outline: 1px solid rgba(255, 255, 255, 0.4);
    }

    span {
      font-size: 20px;
      font-weight: 200;
      text-transform: uppercase;
      width: 60px;
      height: 60px;
      border-radius: 100%;
      border: 1px solid rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: linear-gradient(to bottom, #151d28, #354458);
      color: rgba(255, 255, 255, 0.7);
      text-shadow: 1px 1px black;
      pointer-events: none;
      user-select: none;
    }
  }
}

const buttons = document.querySelectorAll('button');

buttons.forEach((el) => {
  el.addEventListener('click', (e) => {
    buttons.forEach((el) => {
       el.classList.remove('active');
    })
    e.target.classList.add('active');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.