<div class="d-1">1. Hover me </div>
<div class="d-2">2. Hover me </div>
<div class="d-3">3. Hover me </div>
<div class="d-4">4. Hover me </div>

 .d-1 {
   --d:14px;
   
   padding: 8px 8px 8px calc(8px + var(--d));
   background: linear-gradient(rgba(255,255,255,0.4) 0 0) left/var(--d) 100% no-repeat;
   clip-path: polygon(var(--d) 3px,var(--d) 0,100% 0,100% 100%,var(--d) 100%,var(--d) calc(100% - 3px));
   transform: perspective(1000px) rotateY(0deg);
   transition: 0.4s,color 0.4s 0.4s,background-color 0.4s 0.4s;
 }
 .d-1:hover {
   background-color: #000;
   color: #fff;
   clip-path: polygon(0px 3px,var(--d) 0,100% 0,100% 100%,var(--d) 100%,0  calc(100% - 3px));
   transform: perspective(1000px) rotateY(40deg);
   transition: 0.4s,clip-path 0.4s 0.4s,transform 0.4s 0.4s;
 }
 
  .d-2 {
   --d:14px;
   
   padding: 8px calc(8px + var(--d)) 8px 8px;
   background: linear-gradient(rgba(255,255,255,0.4) 0 0) right/var(--d) 100% no-repeat;
   clip-path: polygon(0 0,calc(100% - var(--d)) 0,calc(100% - var(--d)) 3px,calc(100% - var(--d)) calc(100% - 3px),calc(100% - var(--d)) 100%,0 100%); 
   transform: perspective(1000px) rotateY(0deg);
   transition: 0.4s,color 0.4s 0.4s,background-color 0.4s 0.4s;
 }
 .d-2:hover {
   background-color: blue;
   color: #fff;
   clip-path: polygon(0 0,calc(100% - var(--d)) 0,100% 3px,100% calc(100% - 3px),calc(100% - var(--d)) 100%,0 100%); 
   transform: perspective(1000px) rotateY(-40deg);
   transition: 0.4s,clip-path 0.4s 0.4s,transform 0.4s 0.4s;
 }
 .d-3 {
   --d:14px;
   
   padding: 8px 8px calc(8px + var(--d)) 8px;
   background: linear-gradient(rgba(255,255,255,0.4) 0 0) bottom/100% var(--d) no-repeat;
   clip-path: polygon(0 0,100% 0,100% calc(100% - var(--d)),calc(100% - 3px) calc(100% - var(--d)),3px calc(100% - var(--d)) ,0 calc(100% - var(--d))); 
   transform: perspective(1000px) rotateX(0deg);
   transition: 0.4s,color 0.4s 0.4s,background-color 0.4s 0.4s;
 }
 .d-3:hover {
   background-color: #000;
   color: #fff;
   clip-path: polygon(0 0,100% 0,100% calc(100% - var(--d)),calc(100% - 3px) 100%,3px 100% ,0 calc(100% - var(--d)));
   transform: perspective(1000px) rotateX(40deg);
   transition: 0.4s,clip-path 0.4s 0.4s,transform 0.4s 0.4s;
 }
  .d-4 {
   --d:14px;
   
   padding: calc(8px + var(--d)) 8px 8px 8px;
   background: linear-gradient(rgba(255,255,255,0.4) 0 0) top/100% var(--d) no-repeat;
   clip-path: polygon(0 var(--d),3px var(--d),calc(100% - 3px) var(--d),100% var(--d),100% 100%,0 100%); 
   transform: perspective(1000px) rotateX(0deg);
   transition: 0.4s,color 0.4s 0.4s,background-color 0.4s 0.4s;
 }
 .d-4:hover {
   background-color: blue;
   color: #fff;
   clip-path: polygon(0 var(--d),3px 0,calc(100% - 3px) 0,100% var(--d),100% 100%,0 100%); 
   transform: perspective(1000px) rotateX(-40deg);
   transition: 0.4s,clip-path 0.4s 0.4s,transform 0.4s 0.4s;
 }

/**/
[class] {
  display:inline-block;
  vertical-align: middle;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}