CSS opacity से बटन में पारदर्शिता जोड़ें

बटन में पारदर्शिता (ट्रांसपेरेंसी) जोड़ने के लिए CSS opacity प्रॉपर्टी का उपयोग करें। 0 से 1 के बीच का मान सेट करें: 1 = पूरी तरह अपारदर्शी, 0 = पूरी तरह पारदर्शी। यह डिसेबल्ड लुक बनाने के लिए आम है।

उदाहरण: पारदर्शिता के साथ बटन

<!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, background-color 0.3s;
    }
    .btn-enabled {
      background-color: #4CAF50;
      color: white;
      opacity: 1;
    }
    .btn-transparent {
      background-color: #4CAF50;
      color: white;
      opacity: 0.8;  /* 80% अपारदर्शी, 20% पारदर्शी */
    }
    .btn-transparent:hover {
      opacity: 1;  /* होवर पर पूरी तरह अपारदर्शी */
    }
  </style>
</head>
<body>
  <h2>परिणाम</h2>
  <p>नीचे क्लिक करें:</p>
  <button class="btn btn-enabled">इनेबल्ड</button>
  <button class="btn btn-transparent">पारदर्शी (80%)</button>
</body>
</html>

opacity vs rgba/हैक्स

बेहतर डिसेबल्ड स्टेट

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  /* या केवल बैकग्राउंड पारदर्शी */
  background-color: rgba(76, 175, 80, 0.6);
  color: rgba(255, 255, 255, 0.8);
}

ट्रांज़िशन के साथ स्मूथ प्रभाव

.btn {
  transition: opacity 0.2s ease;
}
.btn:hover { opacity: 1; }
.btn:active { opacity: 0.8; }