JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<div class="group">
  <p>Some text blah blah blah</p>
  <div class="row">
    <div class="btn" id="btn">Some Button</div>
  </div>
</div>

CSS

.row {
  background: #B0B7BC;
  padding: 10px;
}

.btn {
  background: #0076B6;
  padding: 10px;
  border-radius: 3px;
  display: inline-block;
  color: white;
  position: relative;
  transform: translateX(-50%);
  left: 50%;
  transition: all .5s .5s;
}

.btn.right {
  background: #FF3C00;
  left: 100%;
  transform: translateX(-100%);
  z-index: 1;
}

.btn:after {
  border-right: 10px solid #FF3C00;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  bottom: -7px;
  right: 10px;
  opacity: 0;
  z-index: -1;
  transition: opacity .2s .5s;
}

.btn.right:after {
  opacity: 1 !important;
}


/*****
 USING ANIMATIONS INSTEAD OF TRANITIONS
*****/


/* @keyframes slideRight {
  from {
    left: 50%;
    transform: translateX(-50%);
  }
  to {
    left: 100%;
    transform: translateX(-100%);
   }
} */

/* .btn.right {
  animation-name: slideRight;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-timing-function: easeout;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  
  background: #FF3C00;
  color: #311D00;
} */


/* @keyframes slideLeft {
  from {
    left: 100%;
    transform: translateX(-100%);
  }
  to {
    left: 50%;
    transform: translateX(-50%);
   }
}

.btn.left {
  animation-name: slideLeft;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-timing-function: easeout;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  
  left: 100%;
  transform: translateX(-100%);
} */

JavaScript

const btn = document.getElementById('btn');
btn.addEventListener('click', () => btn.classList.toggle('right'))