Codrops Hover Styles Skill

This skill covers 21 CSS button hover styles (ButtonHoverStyles) and 15 link underline hover effects (LineHoverStyles) from Codrops. All are CSS-only unless noted.

Sources:

• Buttons: https://github.com/codrops/ButtonHoverStyles
• Links: https://github.com/codrops/LineHoverStyles

Workflow

1. Identify which style(s) the user wants — by name, number, or description.
2. Read the relevant reference file(s) for exact CSS.
3. Adapt to the user's colors/tokens/framework.
4. Deliver clean, ready-to-use HTML + CSS.

Quick Reference

Button Hover Styles (ButtonHoverStyles)

Link/Line Hover Styles (LineHoverStyles)

Reference Files

For full CSS of every style:

• references/button-styles.md — All 21 button styles with HTML markup + CSS
• references/line-styles.md — All 15 link underline styles with HTML markup + CSS

Always read the relevant reference before generating output — it contains exact keyframe names, clip-path coordinates, and structural details that are critical to reproduce correctly.

Usage Patterns

Adapting colors to a design system

Replace #000 / #e7e7e7 / #fff with CSS custom properties:

/* Example: adapt Hyperion to a brand system */
.button--hyperion { color: var(--color-text-inverse); }
.button--hyperion::before { background: var(--color-brand); }

Adapting to Tailwind (arbitrary values)

Most effects rely on ::before/::after pseudo-elements — Tailwind can't do this inline. Write the animation CSS in a <style> block or a .css file, then apply the class.

Using in React/Next.js

Import the CSS file globally or in a component:

// global.css or component.module.css
import './button-hover-styles.css'

// Component
<button className="button button--calypso"><span>Click me</span></button>

Combining with mix-blend-mode: difference

Several buttons (Pan, Hyperion, Mimas, Anthe, Skoll, Greip, Bestia) use mix-blend-mode: difference on the text so it inverts against the fill. This requires the parent to have a dark fill — it won't work on transparent backgrounds.

SVG line styles (Iocaste, Herse, Carme)

These require inline SVG inside the <a>. The SVG uses pathLength="1" so stroke-dashoffset can be used with normalized values (0→1) regardless of path length.

Common Keyframe Animations (shared across buttons)

Define these once if using multiple button styles:

@keyframes MoveUpInitial {
  to { transform: translate3d(0, -105%, 0); }
}
@keyframes MoveUpEnd {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes MoveRightInitial {
  to { transform: translate3d(105%, 0, 0); }
}
@keyframes MoveRightEnd {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes MoveScaleUpInitial {
  to { transform: translate3d(0, -105%, 0) scale3d(1, 2, 1); opacity: 0; }
}
@keyframes MoveScaleUpEnd {
  from { transform: translate3d(0, 100%, 0) scale3d(1, 2, 1); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes marquee {
  0%   { transform: translate3d(var(--move-initial), 0, 0); }
  100% { transform: translate3d(var(--move-final), 0, 0); }
}