CSS Button Collection — Copy Beautiful Button Styles

Ad Slot — Below Header (728×90 Leaderboard)

8 components. Pick one, check it in Preview, open Code to read it, then Copy code — you get the complete HTML and its CSS in one self-contained snippet, so it pastes in looking exactly like the preview.

Solid

HTML + CSS · self-contained17 lines

<div class="nxb1">
  <button type="button" class="nxb1-btn nxb1-primary">Primary</button>
  <button type="button" class="nxb1-btn nxb1-accent">Accent</button>
  <button type="button" class="nxb1-btn nxb1-success">Success</button>
  <button type="button" class="nxb1-btn nxb1-danger">Danger</button>
</div>
<style>
.nxb1 { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxb1-btn { min-height: 46px; padding: 12px 26px; border: 0; border-radius: 999px; font: 600 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #fff; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.nxb1-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(42,31,26,.2); }
.nxb1-btn:active { transform: translateY(0); box-shadow: none; }
.nxb1-btn:focus-visible { outline: 3px solid #e8b48a; outline-offset: 2px; }
.nxb1-primary { background: #2a1f1a; color: #faf6f0; }
.nxb1-accent { background: #a24832; }
.nxb1-success { background: #4f5a35; }
.nxb1-danger { background: #b83a3a; }
</style>

Outline

HTML + CSS · self-contained13 lines

<div class="nxb2">
  <button type="button" class="nxb2-btn nxb2-primary">Primary</button>
  <button type="button" class="nxb2-btn nxb2-accent">Accent</button>
  <button type="button" class="nxb2-btn nxb2-success">Success</button>
</div>
<style>
.nxb2 { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxb2-btn { --c: #2a1f1a; min-height: 46px; padding: 11px 24px; background: transparent; color: var(--c); border: 2px solid var(--c); border-radius: 999px; font: 600 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.nxb2-btn:hover { background: var(--c); color: #fff; }
.nxb2-btn:focus-visible { outline: 3px solid #e8b48a; outline-offset: 2px; }
.nxb2-accent { --c: #a24832; }
.nxb2-success { --c: #4f5a35; }
</style>

Sizes

HTML + CSS · self-contained13 lines

<div class="nxb3">
  <button type="button" class="nxb3-btn nxb3-sm">Small</button>
  <button type="button" class="nxb3-btn">Default</button>
  <button type="button" class="nxb3-btn nxb3-lg">Large</button>
</div>
<style>
.nxb3 { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxb3-btn { min-height: 46px; padding: 12px 26px; background: #2a1f1a; color: #faf6f0; border: 0; border-radius: 999px; font: 600 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; transition: opacity .2s; }
.nxb3-btn:hover { opacity: .88; }
.nxb3-btn:focus-visible { outline: 3px solid #e8b48a; outline-offset: 2px; }
.nxb3-sm { min-height: 40px; padding: 8px 16px; font-size: 13px; }
.nxb3-lg { min-height: 56px; padding: 16px 34px; font-size: 17px; }
</style>

Icon Buttons

HTML + CSS · self-contained22 lines

<div class="nxb4">
  <button type="button" class="nxb4-btn">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11m0 0-4-4m4 4 4-4M5 19h14"/></svg>
    Download
  </button>
  <button type="button" class="nxb4-btn nxb4-accent">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg>
    Like
  </button>
  <button type="button" class="nxb4-round" aria-label="Notifications">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15zM10 20a2 2 0 0 0 4 0"/></svg>
  </button>
</div>
<style>
.nxb4 { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxb4 svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.nxb4-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 12px 22px; background: #2a1f1a; color: #faf6f0; border: 0; border-radius: 999px; font: 600 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxb4-accent { background: #a24832; color: #fff; }
.nxb4-round { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: #fff; color: #2a1f1a; border: 1.5px solid #d4c5a9; border-radius: 50%; cursor: pointer; }
.nxb4-btn:hover, .nxb4-round:hover { filter: brightness(1.12); }
.nxb4-btn:focus-visible, .nxb4-round:focus-visible { outline: 3px solid #e8b48a; outline-offset: 2px; }
</style>

Gradient

HTML + CSS · self-contained16 lines

<div class="nxb5">
  <button type="button" class="nxb5-btn nxb5-sunset">Get started</button>
  <button type="button" class="nxb5-btn nxb5-ocean">Learn more</button>
  <button type="button" class="nxb5-btn nxb5-border"><span>Gradient border</span></button>
</div>
<style>
.nxb5 { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxb5-btn { min-height: 46px; padding: 12px 26px; border: 0; border-radius: 999px; font: 600 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #fff; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.nxb5-btn:hover { transform: translateY(-2px); }
.nxb5-btn:focus-visible { outline: 3px solid #e8b48a; outline-offset: 2px; }
.nxb5-sunset { background: linear-gradient(135deg, #e0603a, #a24832 55%, #6b2a3a); box-shadow: 0 6px 18px rgba(162,72,50,.35); }
.nxb5-sunset:hover { box-shadow: 0 10px 26px rgba(162,72,50,.45); }
.nxb5-ocean { background: linear-gradient(135deg, #2f80ed, #5b3fd1); box-shadow: 0 6px 18px rgba(91,63,209,.3); }
.nxb5-border { padding: 2px; background: linear-gradient(135deg, #e0603a, #5b3fd1); }
.nxb5-border span { display: block; padding: 10px 24px; border-radius: 999px; background: #fff; color: #2a1f1a; }
</style>

3D Press

HTML + CSS · self-contained12 lines

<div class="nxb6">
  <button type="button" class="nxb6-btn">Press me</button>
  <button type="button" class="nxb6-btn nxb6-green">Continue</button>
</div>
<style>
.nxb6 { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-bottom: 6px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxb6-btn { --top: #c4573c; --edge: #7d3424; min-height: 48px; padding: 12px 28px; background: var(--top); color: #fff; border: 0; border-radius: 12px; font: 700 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: .02em; cursor: pointer; box-shadow: 0 6px 0 var(--edge); transform: translateY(0); transition: transform .08s, box-shadow .08s; }
.nxb6-btn:hover { filter: brightness(1.05); }
.nxb6-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge); }
.nxb6-btn:focus-visible { outline: 3px solid #e8b48a; outline-offset: 4px; }
.nxb6-green { --top: #5f8a3a; --edge: #3a5722; }
</style>

Ghost & Link

HTML + CSS · self-contained16 lines

<div class="nxb7">
  <button type="button" class="nxb7-ghost">Ghost button</button>
  <button type="button" class="nxb7-soft">Soft button</button>
  <a href="#" class="nxb7-link">Text link <span aria-hidden="true">→</span></a>
</div>
<style>
.nxb7 { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxb7-ghost, .nxb7-soft, .nxb7-link { min-height: 46px; padding: 12px 22px; border: 0; border-radius: 12px; font: 600 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxb7-ghost { background: transparent; color: #2a1f1a; }
.nxb7-ghost:hover { background: rgba(42,31,26,.07); }
.nxb7-soft { background: #f3e2d9; color: #8a3a27; }
.nxb7-soft:hover { background: #ecd3c6; }
.nxb7-link { display: inline-flex; align-items: center; gap: 6px; color: #a24832; text-decoration: none; padding-left: 8px; padding-right: 8px; }
.nxb7-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.nxb7 :focus-visible { outline: 3px solid #e8b48a; outline-offset: 2px; }
</style>

Loading & Disabled

HTML + CSS · self-contained17 lines

<div class="nxb8">
  <button type="button" class="nxb8-btn" aria-busy="true">
    <span class="nxb8-spin" aria-hidden="true"></span> Saving…
  </button>
  <button type="button" class="nxb8-btn" disabled>Disabled</button>
  <button type="button" class="nxb8-btn nxb8-outline" disabled>Disabled outline</button>
</div>
<style>
.nxb8 { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxb8-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 12px 24px; background: #2a1f1a; color: #faf6f0; border: 2px solid #2a1f1a; border-radius: 999px; font: 600 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxb8-btn[aria-busy="true"] { cursor: progress; opacity: .9; }
.nxb8-btn:disabled { background: #e7e1d8; border-color: #e7e1d8; color: #8c8378; cursor: not-allowed; }
.nxb8-outline:disabled { background: transparent; border-color: #d8d0c4; color: #a39a8e; }
.nxb8-spin { width: 16px; height: 16px; border: 2px solid rgba(250,246,240,.35); border-top-color: #faf6f0; border-radius: 50%; animation: nxb8-rot .8s linear infinite; }
@keyframes nxb8-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nxb8-spin { animation-duration: 2.4s; } }
</style>

Class names carry a unique prefix, so several snippets can sit on one page without clashing. Colours and fonts are plain CSS values — change them to match your brand.

Ad Slot — Mid Content (Responsive In-Article)

💡

What Is This?

Gallery of ready-to-use HTML/CSS button designs
Includes solid, outlined, gradient, pill, and icon buttons
Live preview with hover and animation effects
One-click code copy for HTML and CSS
Easily customizable colors, sizes, and styles

🛠️

How to Use

Browse the gallery of button designs and styles
Click 'Preview' to see each button in action with hover effects
Click 'Copy Code' to grab the HTML and CSS
Paste the code into your project and customize colors/text
Combine button styles for primary, secondary, and ghost variants

🎯

Use Cases

Adding polished buttons to websites and web apps
Finding inspiration for button design and hover effects
Prototyping UI with ready-made button components
Building consistent button systems across a project
Learning CSS button techniques — gradients, shadows, animations

Ad Slot — Bottom (300×250 Rectangle)

🔘 Buttons Collection