Dashed Button
Give your primary actions a distinct, animated outline—subtle at rest, vivid on hover. This button ships with granular controls so you can match any brand or layout in seconds.
Content & typography: set the label text and choose any font. Optional icon (show/hide) for leading/trailing emphasis.
Colors & theming: independent controls for Text Color, Background, Hover Background, Border Color, and Hover Border to keep the outline readable in light or dark UIs.
Border system: tune Border Width and Border Radius (from sharp to fully pill-shaped).
Dash pattern: define Dash Length and Gap Length to control the rhythm of the dashed outline.
Animation behavior: adjust Animation Speed for the dash motion; switch Solid on Hover to convert the dashed outline into a solid ring on interaction.
Layout control: per-side padding (Top/Right/Bottom/Left) for pixel-perfect sizing and icon/label balance.
Motion feel: choose Transition: Spring for a snappy, natural response on hover/press.
Perfect for hero CTAs, pricing tiers, feature cards, and promo banners where you want a tasteful, motion-driven accent without heavy visuals.
Andrej Gaewski
