<a href="#"
   class="next">next</a>
<a href="#"
   class="dot">dot</a>
<a href="#"
   class="sunrise">sunrise</a>
<a href="#"
   class="slant">slant</a>
<a href="#"
   class="liquid">liquid</a>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --bg-color: #2b2b2b;
  --fg-color: rgba(255, 255, 255, 0.9);
  --bd-color: rgba(255, 255, 255, 0.2);
  
    --default-bg: 
    linear-gradient(322deg, #ba4aff, rgba(186, 74, 255, 0) 70%),
    linear-gradient(178deg, #008aff, rgba(0, 138, 255, 0) 70%), 
    linear-gradient(24deg, #00ffc6, rgba(0, 255, 198, 0) 35%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
}

html {
  font-size: 34px;
  font-weight: 200;
}

body {
  min-height: 100vh;
  
  display: grid;
  place-content: center;
  grid-template-columns: repeat(3, max-content);
  gap: 1rem;
  
  background: var(--bg-color);
  
  font-family: "Montserrat", sans-serif;
}

a {
  position: relative;
  
  padding: 0.25rem 1rem;
  
  text-decoration: none;
  color: var(--fg-color);
  
  border: 1px solid var(--bd-color);
  
  display: flex;
  justify-content: center;
  align-items: center;
}

a::before {
  content: '';
  
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  
  background: var(--default-bg);
  
  z-index: -1;
  
  transition: clip-path 400ms ease-out;
}


a.next::before {
  clip-path: polygon(
    0% 0%,
    -0.5rem 0%,
    0% 50%,
    -0.5rem 100%,
    0% 100%,
    -0.5rem 50%
  );
}

a.next:hover::before {
  clip-path: polygon(
    -0.5rem 0%,
    100% 0%,
    calc(100% + 0.5rem) 50%,
    100% 100%,
    -0.5rem 100%,
    0% 50%
  );
}

a.next:active::before {
  clip-path: polygon(
    100% 0%,
    100% 0%,
    calc(100% + 0.5rem) 50%,
    100% 100%,
    100% 100%,
    calc(100% + 0.5rem) 50%
  );
}



a.dot::before {
   clip-path: circle(
     0%
     at
     50% 50%
   );
}

a.dot:hover::before {
  clip-path: circle(
    50%
    at
    50% 50%
  );
}

a.dot:active::before {
  clip-path: circle(
    100%
    at
    50% 50%
  );
}


a.sunrise::before {
  clip-path: circle(
    40%
    at
    50% 200%
  );
}

a.sunrise:hover::before {
  clip-path: circle(
    50%
    at
    50% 100%
  );
}

a.sunrise:active::before {
  clip-path: circle(
    100%
    at
    50% 50%
  );
}


a.slant::before {
  clip-path: polygon(
    0% 0%,
    0% 0%,
    -1rem 100%,
    -1rem 100%
  );
}

a.slant:hover::before {
  clip-path: polygon(
    0% 0%,
    calc(100% + 1rem) 0%,
    100% 100%,
    -1rem 100%
  );
}

a.slant:active::before {
  clip-path: polygon(
    calc(100% + 1rem) 0%,
    calc(100% + 1rem) 0%,
    100% 100%,
    100% 100%
  );
}


a.liquid::before {
  clip-path: ellipse(
    100% 50%
    at
    50% 200%
  );
}

a.liquid:hover::before {
  clip-path: ellipse(
    100% 250%
    at
    50% 200%
  );
}

a.liquid:active::before {
  clip-path: ellipse(
    100% 0%
    at
    50% 0%
  );
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.