<div class="fancy-1">1. Hover me </div>
<div class="fancy-2">2. Hover me </div>
<div class="fancy-3">3. Hover me </div>
<div class="fancy-4">4. Hover me </div>
<div class="fancy-5">5. Hover me </div>
<div class="fancy-6">6. Hover me </div>
<div class="fancy-7">7. Hover me </div>
<div class="fancy-8">8. Hover me </div>
.fancy-1 {
  background:
    radial-gradient(farthest-side at bottom, black 98%, transparent) bottom/calc(2*var(--d, 7px)) var(--d, 0) no-repeat,
    linear-gradient(black 0 0) bottom /15px 3px no-repeat;
  transition: 0.5s;
}
.fancy-1:hover {
  --d: 150%;
  color: #fff
}

.fancy-2 {
  background:
    radial-gradient(circle at bottom right, black 50%, transparent) bottom right/var(--d, 0) var(--d, 0) no-repeat,
    radial-gradient(circle at bottom left, black 50%, transparent) bottom left /var(--d, 0) var(--d, 0) no-repeat,
    linear-gradient(black 0 0) bottom /15px 3px no-repeat,
    linear-gradient(black 0 0) bottom /15px 3px no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s
}
.fancy-2:hover {
  transition: 0.3s, background-size 0.5s 0.3s, color 0.3s 0.3s;
  background-position: bottom right, bottom left;
  --d: 150px;
  color: #fff
}

.fancy-3 {
  background:
    radial-gradient(circle, black 50%, transparent) center/var(--d, 0) var(--d, 0) no-repeat,
    linear-gradient(black 0 0) bottom -12px left 50% /15px 15px no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s
}
.fancy-3:hover {
  transition: 0.3s, background-size 0.4s 0.3s, color 0.3s 0.3s;
  background-position: center;
  --d: 180%;
  color: #fff
}

.fancy-4 {
  background:
    repeating-linear-gradient(black 0 8px, transparent 0 16px) left /var(--d, 0) 100% no-repeat,
    repeating-linear-gradient(transparent 0 8px, black 0 16px) right/var(--d, 0) 100% no-repeat;
  transition: 0.5s;
}
.fancy-4:hover {
  --d: 100%;
  color: #fff
}

.fancy-5 {
  background:
    radial-gradient(farthest-side, transparent calc(100% - 150px), black 0) 
    center /var(--d, 600px) var(--d, 600px) no-repeat;
  transition: 0.5s;
}
.fancy-5:hover {
  --d: 300px;
  color: #fff
}

.fancy-6 {
  background:
    linear-gradient(45deg, #000 50%, transparent 0) right /250% 100% no-repeat,
    linear-gradient(45deg, transparent 50%, #000 0) left /250% 100% no-repeat;
  transition: 0.5s;
}
.fancy-6:hover {
  background-position: center;
  color: #fff;
}

.fancy-7 {
  background:
    conic-gradient(from -45deg, black 90deg, transparent 91deg) bottom /20px 250% repeat-x,
    conic-gradient(from -45deg, transparent 90deg, black 91deg) top /20px 250% repeat-x;
  transition: 0.5s;
}
.fancy-7:hover {
  background-position: center;
  color: #fff
}

.fancy-8 {
  background:
    conic-gradient(from 135deg at 50% -10px, black 90deg, transparent 91deg) 50% calc(-3px - 50%) /100% 300% no-repeat;
  transition: 0.5s;
}
.fancy-8:hover {
  background-position: bottom;
  color: #fff
}


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

body {
  text-align:center;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.