JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div id="outer">
  <div class="button_slide slide_right color-1">Book a Demo <i class="fa-solid fa-chevron-right"></i></div>
  <div class="button_slide slide_right color-2">Book a Demo <i class="fa-solid fa-chevron-right"></i></div>
  <div class="button_slide slide_right color-3">Book a Demo <i class="fa-solid fa-chevron-right"></i></div>
  <div class="button_slide slide_right color-4">Book a Demo <i class="fa-solid fa-chevron-right"></i></div>
  <div class="button_slide slide_right color-5">Book a Demo <i class="fa-solid fa-chevron-right"></i></div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

.button_slide {
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-transition: ease-out 1s;
  -moz-transition: ease-out 1s;
  transition: ease-out 1s;
}
.color-1{
  color: #2e2e2e;
  border: 2px solid #9bc4fc;
  box-shadow: inset 0 0 0 0 #9bc4fc;
  background: #fff;
   transform: translateZ(0.1px);
}
.color-1:hover {
  box-shadow: inset 400px 0 0 0 #9bc4fc;
  color: #2e2e2e;
  border: 2px solid #9bc4fc;
  -webkit-backface-visibility: hidden;
}

.color-2{
  color: #2e2e2e;
  border: 2px solid #9bc4fc;
  box-shadow: inset 0 0 0 0 #9bc4fc;
  background: #9bc4fc;
}
.color-2:hover {
  box-shadow: inset 400px 0 0 0 #2e2e2e;
  color: #ebebeb;
  border: 2px solid #2e2e2e;
}

.color-3{
  color: #2e2e2e;
  border: 2px solid #9bc4fc;
  box-shadow: inset 0 0 0 0 #cec3fc;
  background: #9bc4fc;
}
.color-3:hover {
  box-shadow: inset 400px 0 0 0 #cec3fc;
  color: #2e2e2e;
  border: 2px solid #cec3fc;
}

.color-4{
  color: #2e2e2e;
  border: 2px solid #9bc4fc;
  box-shadow: inset 0 0 0 0 #f34199;
  background: #9bc4fc;
}
.color-4:hover {
  box-shadow: inset 400px 0 0 0 #f34199;
  color: #ebebeb;
  border: 2px solid #f34199;
}

.color-5{
  color: #2e2e2e;
  border: 2px solid #9bc4fc;
  box-shadow: inset 0 0 0 0 #ebebeb;
  background: #9bc4fc;
}
.color-5:hover {
  box-shadow: inset 400px 0 0 0 #ebebeb;
  color: #2e2e2e;
  border: 2px solid #ebebeb;
}

#outer {
  margin: 50px auto 0 auto;
  text-align: center;
}