galaxy/Cards/devkatyall_gentle-fly-78.html

<div class="card">
  <div class="emojis">
    <button>😄</button>
    <button>😁</button>
    <button>😆</button>
    <button>😂</button>
  </div>
  <div class="emojis">
    <button>😄</button>
    <button>😁</button>
    <button>😆</button>
    <button>😂</button>
  </div>
</div>

<style>
/* From Uiverse.io by devkatyall  - Tags: card */
.card {
  width: 354px;
  background: rgba(41, 41, 41, 0.07);
  white-space: nowrap;
  overflow: hidden;
  border-radius: 50px;
  -webkit-box-shadow: -10px 0px 13px -7px #0000003a,
    10px 0px 13px -7px #0000003a, 5px 5px 15px 5px rgba(0, 0, 0, 0);
  box-shadow: -10px 0px 33px -7px #0000003a, 10px 0px 33px -7px #0000003a,
    5px 5px 35px 5px rgba(0, 0, 0, 0);
}

button {
  font-size: 70px;
  margin: 0 5px;
  border: none;
  background-color: transparent;
  cursor: grab;
}
button:hover {
  transform: scale(1.1);
  transition: 0.5s ease;
}
.emojis {
  display: inline-block;
  animation: 5s sliding infinite linear;
}

/* to pause on hover  */
/* .card:hover .emojis{
  animation-play-state: paused;
} */

@keyframes sliding {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-101%);
  }
}

</style>