🔘 Buttons Collection

<button class="btn-solid primary">Primary</button>
<button class="btn-solid accent">Accent</button>
<button class="btn-solid success">Success</button>
<button class="btn-solid danger">Danger</button>

<style>
.btn-solid {
  padding: 12px 28px;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.btn-solid:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-solid.primary { background: #2a1f1a; color: #faf6f0; }
.btn-solid.accent { background: #c4654a; }
.btn-solid.success { background: #5a6340; }
.btn-solid.danger { background: #c44a4a; }
</style>

<button class="btn-outline primary">Primary</button>
<button class="btn-outline accent">Accent</button>
<button class="btn-outline success">Success</button>

<style>
.btn-outline {
  padding: 11px 26px;
  background: transparent;
  border: 2px solid;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline.primary { color: #2a1f1a; border-color: #2a1f1a; }
.btn-outline.primary:hover { background: #2a1f1a; color: #fff; }
.btn-outline.accent { color: #c4654a; border-color: #c4654a; }
.btn-outline.accent:hover { background: #c4654a; color: #fff; }
.btn-outline.success { color: #5a6340; border-color: #5a6340; }
.btn-outline.success:hover { background: #5a6340; color: #fff; }
</style>

<button class="btn sm">Small</button>
<button class="btn md">Default</button>
<button class="btn lg">Large</button>

<style>
.btn {
  background: #2a1f1a; color: #faf6f0;
  border: none; border-radius: 50px;
  font-weight: 600; cursor: pointer;
  transition: opacity 0.2s;
}
.btn:hover { opacity: 0.85; }
.btn.sm { padding: 8px 16px; font-size: 0.78rem; }
.btn.md { padding: 12px 28px; font-size: 0.95rem; }
.btn.lg { padding: 16px 36px; font-size: 1.05rem; }
</style>

<button class="btn-icon"><span>⬇</span> Download</button>
<button class="btn-icon accent"><span>❤</span> Like</button>
<button class="btn-round">🔔</button>

<style>
.btn-icon {
  padding: 12px 24px; background: #2a1f1a; color: #faf6f0;
  border: none; border-radius: 50px; font-size: 0.95rem;
  font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-icon.accent { background: #c4654a; color: #fff; }
.btn-round {
  width: 44px; height: 44px;
  background: #f5efe6; border: 1.5px solid #d4c5a9;
  border-radius: 50%; font-size: 1.1rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
</style>