<div class="index-container">
  <div class="wrapper">
    <div class="btn active">
      <div>
        <i class="fas fa-ice-cream"></i>
      </div>
    </div>
    <div class="btn">
      <div>
        <i class="fas fa-shopping-cart"></i>
      </div>
    </div>
    <div class="btn">
      <div>
        <i class="fa-solid fa-user-secret"></i>
      </div>
    </div>
  </div>
</div>
body {
  background-image: linear-gradient(
    135deg,
    hsl(var(--hue) 20% 95%),
    hsl(var(--hue) 20% 80%)
  );
  --hue: 220deg;
  overflow: hidden;
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
}
.index-container div {
  flex: 1;
}
.wrapper {
  position: relative;
  width: 11rem;
  display: grid;
  grid-auto-flow: column;
  gap: 2rem;
  transform: scale(3);
  padding: 1rem;
  border-radius: 18px;
  border: solid 0.2rem #ffa500;
  box-shadow: inset 3px 3px 7px rgba(136, 165, 191, 0.48),
    inset -3px -3px 7px #ffffff, 4px 2px 16px rgba(136, 165, 191, 0.48),
    -4px -2px 16px #ffffff;
}
.btn {
  width: 32px;
  height: 32px;
  position: relative;
  border-radius: 8px;
  padding: 1px;
  box-shadow: 4px 2px 16px rgba(136, 165, 191, 0.48), -4px -2px 16px #ffffff;
  cursor: pointer;
}
.btn div {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  display: grid;
  place-items: center;
}
.btn div i {
  transition: all 0.2s ease-in-out;
  font-size: 0.8em;
  position: relative;
  color: rgba(201, 215, 230, 0.8);
  text-shadow: 2px 2px 2px #d6e1ef99, 0 0 0 #000, 2px 2px 2px #d6e1ef00;
}

.btn.active div {
  transform: scaleX(0.98);
  box-shadow: inset 3px 3px 7px rgba(136, 165, 191, 0.48),
    inset -3px -3px 7px #ffffff;
}
.btn.active div i {
  color: rgba(255, 166, 0, 0.8);
  text-shadow: 1px 1px 1px #d6e1ef99, 0 0 0 #000, 1px 1px 1px #d6e1ef00;
}
View Compiled 
const btns = document.querySelectorAll('.btn');

for (let btn of btns) {
    btn.onclick = () =>     
    btn.classList.toggle('active');
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.