CSS opacity और transition प्रॉपर्टीज का उपयोग करके बटन पर होवर करने पर फेड-इन (धीरे-धीरे पूरी तरह अपारदर्शी होना) प्रभाव बनाया जा सकता है। यह इंटरैक्टिव UI के लिए सहज दृश्य प्रतिक्रिया प्रदान करता है।
उदाहरण
नीचे दिए गए उदाहरण में, बटन प्रारंभ में 50% पारदर्शी (opacity: 0.5) है और होवर पर पूरी तरह अपारदर्शी (opacity: 1, कोड में 2 लिखा है लेकिन मान्य मान 1 है) हो जाता है।
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: orange;
color: white;
padding: 10px;
text-align: center;
font-size: 16px;
margin: 5px;
opacity: 0.5;
transition: 0.5s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<button class="btn">Result</button>
</body>
</html>
मुख्य बिंदु:
opacity: 0.5- प्रारंभिक अर्ध-पारदर्शी स्थितिtransition: 0.5s- सभी बदलने योग्य प्रॉपर्टीज के लिए 0.5 सेकंड ट्रांजिशनopacity: 1होवर पर - पूरी तरह दृश्यमान (नोट:opacityमान 0 से 1 के बीच होना चाहिए)cursor: pointer- क्लिक करने योग्य होने का संकेत
सुधार: transition: opacity 0.5s लिखकर केवल opacity के लिए ट्रांजिशन सीमित कर सकते हैं।
