Call-to-Action Button Component

Problem/Feature Description

The design team has finalized a new call-to-action button for the marketing site. The button needs to accept a configurable background color and smoothly shift that color when the user hovers over it or presses it — darker on hover, darker still when held down. The effect should feel subtle and polished, not jarring. The design spec says the hover and active states must be driven by the same base background color passed as a prop, so the component stays flexible across different brand contexts.

Currently there is no generic button with this dynamic color behavior in the shared component library. A frontend engineer needs to implement it from scratch using the project's standard CSS-in-JS setup.

Output Specification

Produce a JavaScript styles file (e.g., Button.styles.js) that exports the styled button component(s). Include any helper logic needed for computing the state-dependent background colors. The file should be ready to import in a React component. Do not generate large compiled bundles — source files only.