All styles
Outline & Ghost

Dashed Craft CSS Button

Free24 lines · no JS
Open in Studio
Theme

A real <button> carrying .btn-dashed-craft — the preview is the stylesheet, not a picture of it.

States
default
hover
focus-visible
active
disabled
not declared
.btn-dashed-craft {
  display: inline-block;
  padding: 12px 26px;
  border: 2px dashed #8b95a5;
  border-radius: 10px;
  background: transparent;
  color: #8b95a5;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-dashed-craft:hover {
  border-color: #38bdf8;
  color: #38bdf8;
}
.btn-dashed-craft:active {
  border-style: solid;
}
.btn-dashed-craft:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-dashed-craft
Outline & GhostRounded

Implementation notes

About the Dashed Craft CSS button

Dashed Craft uses a lightweight treatment that keeps secondary actions visible. Its rounded corners balance product-friendly softness with a clear boundary. Its structure comes from a 2px border. The interaction stays intentionally restrained.

Usage

<button class="btn-dashed-craft">Button</button>

Pair it with the CSS tab above — the class is self-contained.

Before shipping: keep the semantic button element, verify contrast on your actual background and add a visible:focus-visible state. If you retain motion, include a prefers-reduced-motion override.
Built with
HTML + plain CSS
Shape
Rounded
Exports
CSS, Tailwind, React
License
MIT · commercial use
Complete the look

Build the interface around this button

We matched its palette, surface, geometry and motion to a complete UI system — like composing an outfit, not browsing unrelated parts.

Style DNA · v1
How matching works →
Pro preview
Modal83% match

Midnight System Decision Modal

Midnight System kit

blue paletteDark UI character
Unlock with Pro →
Free sample
Input83% match

Midnight System Smart Input

Midnight System kit

blue paletteDark UI character
Pro preview
Toggle83% match

Midnight System Preference Toggle

Midnight System kit

blue paletteDark UI character
Unlock with Pro →
Pro preview
Card83% match

Midnight System Feature Card

Midnight System kit

blue paletteDark UI character
Unlock with Pro →
Pro preview
Dropdown83% match

Midnight System Action Menu

Midnight System kit

blue paletteDark UI character
Unlock with Pro →
Pro preview
Form83% match

Midnight System Signup Form

Midnight System kit

blue paletteDark UI character
Unlock with Pro →
Get the complete Midnight System kit
Six coordinated component types, commercial license and future kit updates.
Explore Pro · $39

More styles that match

Blueprint Trace

Double Frame

Ghost Accent

Ghost Slate

Outline Blue

Outline Dark

Two optional extras load only if you allow them. Every button, preview and line of code works exactly the same either way. What each one does