<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%
);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.