Hover effects as styled-components

An effect, in styled-components

This is the Gradient Shift Button effect, run through the converter when this page was built — not a sample of what the output is meant to look like. All 1,126 effects convert the same way, because every one of them is markup plus a stylesheet.

/**
 * BtnGradient — Gradient Shift Button
 * A button whose multi-color gradient slides across on hover, paired with a soft drop shadow that intensifies.
 *
 * Generated by Hoverlab from the "btn-gradient" effect.
 * Requires styled-components v5 or later.
 */
import styled from 'styled-components'

const BtnGradientRoot = styled.button`
  position: relative;
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: 0.625rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(120deg, #f43f5e, #f59e0b, #10b981, #6366f1);
  background-size: 300% 300%;
  background-position: 0% 50%;
  transition: background-position 0.6s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 18px -6px rgba(244, 63, 94, 0.5);

  &:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(99, 102, 241, 0.55);
  }

  &:active {
    transform: translateY(0);
  }
`

export function BtnGradient() {
  return (
    <BtnGradientRoot>
      Get Started
    </BtnGradientRoot>
  )
}

export default BtnGradient

Blocks and pages

The block tier has no styled-components target. Blocks are React components carrying hundreds of Tailwind utility classes, and rewriting those as CSS-in-JS would produce a worse block wearing the same name. The effect tier above is where styled-components is served.

Getting it into your project

npx hoverlab add btn-gradient

No flag. The CLI reads your package.json and emits styled-components because styled-components is a dependency. It also picks the folder — an existing components directory rather than a new top-level one.

In a monorepo where detection has nothing to go on, say it outright: npx hoverlab add btn-gradient --framework styled-components

1. 1Save the file in your components folder. The @keyframes are hoisted into keyframes helpers, so there is no global animation name to collide with.
2. 2The root class selector is rewritten to &, which binds the styles to the component rather than to a global class name.
3. 3This is the one target with nothing at the block rung: blocks are React plus Tailwind, and rewriting hundreds of utility classes as CSS-in-JS would be a worse block wearing the same name.

Where the licence comes into it

Also targeted

• ReactReact 19 · Next.js · Vite
• HTML + CSSRails · Laravel · Django
• VueVue 3 · Nuxt · Vite
• SvelteSvelte 5 · SvelteKit · Vite
• AstroAstro 5 · Starlight · content sites
• TailwindTailwind v4 · Tailwind v3 · any framework