<button class="date-time-button relative flex flex-wrap rounded p-2 disabled-state cursor-not-allowed border border-gray-300 bg-[#eeeeee] text-gray-400 hover:bg-[#eeeeee]">
  <span class="inline-block w-full">Demo</span>
</button>
.disabled-state::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    #ccc,
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4