<div class="shape-0">0. Hover me </div>
<div class="shape-1">1. Hover me </div>
<div class="shape-2">2. Hover me </div>
<div class="shape-3">3. Hover me </div>
<div class="shape-4">4. Hover me </div>
<div class="shape-5">5. Hover me </div>
<div class="shape-6">6. Hover me </div>
<div class="shape-7">7. Hover me </div>
<div class="shape-8">8. Hover me </div>
<div class="shape-9">9. Hover me </div>

.shape-0 {
  padding:10px;
  border-radius:20px;
}
.shape-0:hover {
  color:#fff;
  background:black;
}

.shape-1 {
  padding:10px;
  clip-path:polygon(0 0,8px 50%,0 100%,50% calc(100% - 8px),100% 100%,calc(100% - 8px) 50%,100% 0,50% 8px);
}
.shape-1:hover {
  color:#fff;
  background:black;
}

.shape-2 {
  padding:10px;
  -webkit-mask:
    radial-gradient(14px at top    left ,#0000 94%,#fff) top    left,
    radial-gradient(14px at top    right,#0000 94%,#fff) top    right,
    radial-gradient(14px at bottom left ,#0000 94%,#fff) bottom left,
    radial-gradient(14px at bottom right,#0000 94%,#fff) bottom right;
  -webkit-mask-size:51% 51%;
  -webkit-mask-repeat:no-repeat;
}
.shape-2:hover {
  color:#fff;
  background:black;
}

.shape-3 {
  padding:10px;
  -webkit-mask:
    linear-gradient( 135deg ,#0000 15px,#fff 0) top    left,
    linear-gradient(-135deg ,#0000 15px,#fff 0) top    right,
    linear-gradient( 45deg  ,#0000 15px,#fff 0) bottom left,
    linear-gradient(-45deg  ,#0000 15px,#fff 0) bottom right;
  -webkit-mask-size:51% 51%;
  -webkit-mask-repeat:no-repeat;
}
.shape-3:hover {
  color:#fff;
  background:black;
}

.shape-4 {
  padding:15px;
  clip-path: polygon(0 0,calc(50% - 10px) 0,50% 10px,calc(50% + 10px) 0,100% 0,100% calc(50% - 10px),calc(100% - 10px) 50%,100% calc(50% + 10px),100% 100%,calc(50% + 10px) 100%,50% calc(100% - 10px),calc(50% - 10px) 100%,0 100%,0 calc(50% + 10px),10px 50%,0 calc(50% - 10px));
}
.shape-4:hover {
  color:#fff;
  background:black;
}

.shape-5 {
  padding:10px;
  -webkit-mask:
    linear-gradient(#fff 0 0 ) center/ 100% calc(100% - 2*10px) no-repeat,
    radial-gradient(circle closest-side,#fff 97%,#0000);
}
.shape-5:hover {
  color:#fff;
  background:black;
}

.shape-6 {
  padding:10px 15px;
  -webkit-mask:
    conic-gradient(from  -45deg at bottom,#0000 90deg,#fff 0 ) 0%  0    /10% 12px repeat-x,
    conic-gradient(from  135deg at top   ,#0000 90deg,#fff 0 ) 0%  100% /10% 12px repeat-x,
    linear-gradient(#fff 0 0) center/100% calc(100% - 24px) no-repeat;
}
.shape-6:hover {
  color:#fff;
  background:black;
}

.shape-7 {
  padding:8px 15px;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)
}
.shape-7:hover {
  color:#fff;
  background:black;
}

.shape-8 {
  padding:15px 8px;
  clip-path:polygon(0 0,100% 10px,100% 100%,0 calc(100% - 10px))
}
.shape-8:hover {
  color:#fff;
  background:black;
}

.shape-9 {
  padding:8px 15px;
  -webkit-mask:
    radial-gradient(circle closest-side,#fff 93%,#0000) 0/8% calc(100%/3) round,
    linear-gradient(#fff 0 0) center/calc(100% - 10px) calc(100% - 10px) no-repeat;
}
.shape-9:hover {
  color:#fff;
  background:black;
}

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

body {
  text-align:center;
}