Grab Handle

<button type="button" class="nuda-cur2-grab-hand">
  <svg class="nuda-cur2-grab-hand__icon" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
    <circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/>
    <circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/>
    <circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/>
  </svg>
  <span>Drag me</span>
</button>

.nuda-cur2-grab-hand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  color: #fafafa;
  font-size: 13px;
  font-weight: 600;
  cursor: grab;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}

.nuda-cur2-grab-hand:hover {
  border-color: rgba(228,255,84,.35);
  box-shadow: 0 10px 24px -14px rgba(228,255,84,.3);
}

.nuda-cur2-grab-hand:active {
  cursor: grabbing;
  transform: scale(.94) translateY(3px) rotate(-1.5deg);
  background: #1c1c10;
  box-shadow: 0 2px 8px -4px rgba(0,0,0,.6);
}

.nuda-cur2-grab-hand__icon {
  color: #e4ff54;
  flex: none;
}

.nuda-cur2-grab-hand:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cur2-grab-hand {
    transition: none;
  }
  .nuda-cur2-grab-hand:active {
    transform: none;
  }
}