JSFiddle - React, Tailwind, and code Playground

by Porfirio Chavez

HTML

<div class="container">
  <div class="button">Skew Fill Left -> Right</div>
    <div class="button">Skew Fill Left -> Right</div>
      <div class="button">Skew Fill Left -> Right</div>
</div>

SCSS

body {
  background: linear-gradient(135deg, rgba(85,239,203,1) 0%,rgba(30,87,153,1) 0%,rgba(85,239,203,1) 0%,rgba(91,202,255,1) 100%);
  color: #f7f7f7;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 60vw;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
}

.button {
  flex: 1 1 auto;
  margin: 10px;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    background: linear-gradient(120deg, white, teal);
  }
  
   &:after {
    height: 120%;
    left: -10%;
    transform: skewX(-35deg);
    z-index: -1;
  }
  
  &:hover {
    cursor: pointer;
    color: white;
    &:after {
      left: -10%;
      width: 120%;
    }
  }
 }