Capture your own elements →Add to Chrome - It's Free

HTML

<div class="demo">
  <div class="btn-group">
    <button class="btn btn-ghost">Cancel</button>
    <button class="btn btn-ghost">Save Draft</button>
    <button class="btn btn-primary">Publish</button>
  </div>
</div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.btn-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn {
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms;
  font-family: inherit;
  line-height: 1.4;
}
.btn-ghost {
  background: transparent;
  color: #374151;
  border: 1px solid #d1d5db;
}
.btn-ghost:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.btn-primary {
  background: #3b82f6;
  color: #fff;
  border: 1px solid #3b82f6;
}
.btn-primary:hover { background: #2563eb; border-color: #2563eb; }