JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<a href="#0">Test button</a>

<a href="#0">Test button longer</a>

<a href="#0">Test button much much longer</a>

CSS

body{
  background:#FCC;
}
a{
  z-index: 0;
  position: relative;
  display: inline-block;
  padding: 10px 60px;
  overflow: hidden;
  line-height:30px;
}
a:before{
  content:'';
  display:block;
  position: absolute;
  top:0;
  left:-25px;
  border:25px solid white;
  border-right-color: transparent;
  
}
a:after{
  content:'';
  z-index: -1;
  position: absolute;
  right:100%;
  top:50%;
  width:300px;
  height:300px;
  background:red;
  margin:0 -50px 0 0;
  transform: rotate(45deg);
  transform-origin: 100% 0;
  transition:all 300ms ease;
}
a:hover:after{
  right:0;
  margin-right:0;
}