Dashed Button

Animated Dashed Border

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.

Animated Dashed Border