Create a button with a gradient background and border.

by Muthuraman B

HTML

<div style="display:flex; gap:8px;">
  <button class="button-14" role="button">8 dsdsd SCCzxc</button>
  <button class="button-14" role="button">9</button>
  <button class="button-14" role="button">10</button>
</div>

CSS

.button-14 {
  background: linear-gradient(#f7f8fa, #e7e9ec);
  border: 1px solid #8d9096;
  box-shadow: rgba(255, 255, 255, .6) 0 1px 0 inset;
  padding: 0 8px;
  text-align: left;
  transition: all 0.15s ease;
}

.button-14:hover {
  background: linear-gradient(#e7e9ec, #d7d9dc);
}