<div class="morphing-1">1. Hover me </div>
<div class="morphing-2">2. Hover me </div>
<div class="morphing-3">3. Hover me </div>
<div class="morphing-4">4. Hover me </div>
<div class="morphing-5">5. Hover me </div>
.morphing-1 {
   padding:8px;
   box-shadow:0 0 0px 80px var(--c,#0000);
   background:var(--c,#0000);
   transition: 0.3s,clip-path 0s;
   clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
 }
 .morphing-1:hover {
  --c:#000;
  color:#fff;
  transition: 0.3s,clip-path cubic-bezier(.5,150,.5,-150) 0.4s 0.3s; 
  clip-path: polygon(0.5px 0,calc(100% + 0.5px) 0,calc(100% - 0.5px) 100%,-0.5px 100%);
 }

 .morphing-2 {
   padding:8px;
   box-shadow:0 0 0px 80px var(--c,#0000);
   background:var(--c,#0000);
  transition: 0.3s,clip-path 0s;
   clip-path: polygon(0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%, 0 50%);
 }
 .morphing-2:hover {
  --c:#000;
  color:#fff;
  transition: 0.3s,clip-path cubic-bezier(1,150,0.5,150) 0.4s 0.3s; 
   clip-path: polygon(-0.5px -0.5px,50% 0,calc(100% + 0.5px) -0.5px,100% 50%,calc(100% + 0.5px) calc(100% + 0.5px),50% 100%,-0.5px calc(100% + 0.5px), 0 50%);
 }

 .morphing-3 {
   padding:8px;
   box-shadow:0 0 0px 80px var(--c,#0000);
   background:var(--c,#0000);
   transition: 0.3s 0.3s,clip-path 0.3s;
   clip-path: polygon(0 0,20% 0,30% 0,40% 0,50% 0,60% 0,70% 0,80% 0,100% 0,100% 25%,100% 50%,100% 75%,100% 100%,80% 100%,70% 100%,60% 100%,50% 100%,40% 100%,30% 100%,20% 100%,0 100%,0 75%,0 50%,0 25%);
 }
 .morphing-3:hover {
  --c:#000;
  color:#fff;
  transition: 0.3s,clip-path  0.4s 0.3s; 
  clip-path: polygon(-30px -30px,20% 0,20% -20px,40% 0,50% -30px,60% 0,80% -20px,80% 0,calc(100% + 30px) -30px,100% 25%,calc(100% + 25px) 50%,100% 75%,calc(100% + 30px) calc(100% + 30px),80% 100%,80% calc(100% + 20px),60% 100%,50% calc(100% + 30px),40% 100%,20% calc(100% + 20px),20% 100%,-30px calc(100% + 30px),0 75%,-25px 50%,0 25%);
 }

 .morphing-4 {
   padding:8px;
   box-shadow:0 0 0px 80px var(--c,#0000);
   background:var(--c,#0000);
   transition: 0.3s,clip-path 0s;
   clip-path: polygon(0 0,20% 0,30% 0,40% 0,50% 0,60% 0,70% 0,80% 0,100% 0,100% 25%,100% 50%,100% 75%,100% 100%,80% 100%,70% 100%,60% 100%,50% 100%,40% 100%,30% 100%,20% 100%,0 100%,0 75%,0 50%,0 25%);
 }
 .morphing-4:hover {
  --c:#000;
  color:#fff;
  transition: 0.3s,clip-path cubic-bezier(1,150,0.5,150) 0.4s 0.3s; 
  clip-path: polygon(-0.5px -0.5px,20% 0,29.9% -0.3px,40% 0,50% -0.5px,60% 0,70.1% -0.3px,80% 0,calc(100% + 0.5px) -0.5px,100% 25%,calc(100% + 0.4px) 50%,100% 75%,calc(100% + 0.5px) calc(100% + 0.5px),80% 100%,70.1% calc(100% + 0.3px),60% 100%,50% calc(100% + 0.5px),40% 100%,29.9% calc(100% + 0.3px),20% 100%,-0.5px calc(100% + 0.5px),0 75%,-0.4px 50%,0 25%);
 }

  div.morphing-5 {
   padding:8px;
    margin: 100px 25px;
   box-shadow:0 0 0px 100px var(--c,#0000);
   background:
     conic-gradient(from  97deg  at top left ,#868686 22deg,#0000 0) 20% 86%,
     conic-gradient(from -120deg at top right,#868686 22deg,#0000 0) 80% 86%,
     var(--c,#0000);
   background-repeat: no-repeat;
   background-size: 0 0;
   clip-path: polygon(0 0, 30% 0, 45% 0,55% 0, 70% 0,100% 0,100% 100%,100% 100%,90% 100%,60% 100%,50% 100%,40% 100%,10% 100%,0 100%,0 100%);
   transition: 0.3s 0.4s,clip-path 0.4s,padding 0.4s,background-size 0.2s;
 }
 div.morphing-5:hover {
  --c:#000;
  color:#fff;
  padding-bottom: 20px;
   background-size: 47px 20px;
   clip-path: polygon(5% -100px, 20% 0, 45% -20px,55% -20px, 80% 0,95% -100px,100% 100%,85% calc(100% + 80px),90% 100%,60% calc(100% + 10px),50% calc(100% + 30px),40% calc(100% + 10px),10% 100%,15% calc(100% + 80px),0 100%);
  transition: 0.3s,padding 0.4s 0.3s,clip-path 0.4s 0.3s,background-size 0.15s 0.7s; 
 }

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

body {
  text-align:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.