Gradient Share Buttons

<div class="nuda-shr-grad">
  <button class="nuda-shr-grad__btn nuda-shr-grad__btn--tw">
    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.26 5.632zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
    <span>Tweet</span>
  </button>
  <button class="nuda-shr-grad__btn nuda-shr-grad__btn--ig">
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
    <span>Story</span>
  </button>
  <button class="nuda-shr-grad__btn nuda-shr-grad__btn--ac">
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/></svg>
    <span>Share</span>
  </button>
</div>

.nuda-shr-grad {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.nuda-shr-grad__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border: none;
  border-radius: 9px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  transition: opacity .15s,transform .15s;
}

.nuda-shr-grad__btn:hover {
  opacity: .85;
  transform: translateY(-1px);
}

.nuda-shr-grad__btn--tw {
  background: linear-gradient(135deg,#1a1a1a 0%,#333 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}

.nuda-shr-grad__btn--ig {
  background: linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  box-shadow: 0 2px 10px rgba(220,39,67,.35);
}

.nuda-shr-grad__btn--ac {
  background: linear-gradient(135deg,#e4ff54 0%,#a8d800 100%);
  color: #0a0a0a;
  box-shadow: 0 2px 10px rgba(228,255,84,.25);
}