ButtonsHover

Slice Button

A diagonal label reveal where the hover state cuts upward through the button.

export default function SliceButton() {
  const config = {
    label: "Copy code",
    hoverLabel: "Copied",
    bgColor: "#111827",
    textColor: "#dbeafe",
    radius: 999,
    duration: 380
  };

return (
    <button
      className="slice-button"
      style={{
        "--slice-bg": config.bgColor,
        "--slice-color": config.textColor,
        "--slice-radius": config.radius + "px",
        "--slice-duration": config.duration + "ms"
      }}
    >
      <span className="slice-front">{config.label}</span>
      <span className="slice-back">{config.hoverLabel}</span>
      <style>{`
        .slice-button {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          padding: 11px 26px;
          border: 1px solid rgba(148, 163, 184, 0.34);
          border-radius: var(--slice-radius);
          background: var(--slice-bg);
          color: var(--slice-color);
          font: 600 14px/1 system-ui, sans-serif;
          cursor: pointer;
        }
        .slice-front,
        .slice-back {
          white-space: nowrap;
          transition:
            transform var(--slice-duration) cubic-bezier(0.34, 1.1, 0.64, 1),
            opacity 300ms ease;
        }
        .slice-back {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translateY(100%) skewY(6deg);
          opacity: 0;
        }
        .slice-button:hover .slice-front {
          transform: translateY(-100%) skewY(-6deg);
          opacity: 0;
        }
        .slice-button:hover .slice-back {
          transform: translateY(0) skewY(0);
          opacity: 1;
        }
      `}</style>
    </button>
  );
}