CSS से बटन को डिसेबल्ड लुक दें

बटन को डिसेबल्ड (निष्क्रिय) दिखाने के लिए CSS opacity प्रॉपर्टी का उपयोग करें। कम ओपेसिटी (पारदर्शिता) बटन को धुंधला और निष्क्रिय जैसा दिखाती है।

उदाहरण: इनेबल्ड और डिसेबल्ड बटन

<!DOCTYPE html>
<html>
<head>
  <style>
    .btn {
      color: black;
      text-align: center;
      font-size: 15px;
      padding: 10px 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
      transition: opacity 0.3s;
    }
    .btn-enabled {
      background-color: #4CAF50;
      color: white;
      opacity: 1;
    }
    .btn-disabled {
      background-color: #4CAF50;
      color: white;
      opacity: 0.5;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <h2>परिणाम</h2>
  <p>नीचे क्लिक करें:</p>
  <button class="btn btn-enabled">इनेबल्ड</button>
  <button class="btn btn-disabled" disabled>डिसेबल्ड</button>
</body>
</html>

बेहतर दृष्टिकोण

केवल opacity के बजाय, वास्तविक डिसेबल्ड स्टेट के लिए disabled एट्रिब्यूट और :disabled स्यूडो-क्लास का उपयोग करें:

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #ccc;
  color: #666;
}

अतिरिक्त सुझाव

• pointer-events: none से क्लिक इवेंट्स ब्लॉक करें
• रंग बदलकर विज़ुअल फीडबैक दें
• ट्रांज़िशन से स्मूथ प्रभाव जोड़ें