CSS :hover स्यूडो-क्लास से होवरेबल बटन बनाएं

CSS :hover स्यूडो-क्लास का उपयोग करके जब उपयोगकर्ता माउस पॉइंटर को बटन (या किसी तत्व) पर ले जाता है तो उसकी स्टाइल बदलकर होवर प्रभाव बनाया जा सकता है। यह इंटरैक्टिव UI के लिए मूलभूत तकनीक है।

उदाहरण

नीचे दिए गए उदाहरण में, बटन पर होवर करने पर बैकग्राउंड रंग पीले से नारंगी और बॉर्डर डैश्ड से सॉलिड हो जाता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .btn {
      background-color: yellow;
      color: black;
      text-align: center;
      font-size: 15px;
      padding: 20px;
      border-radius: 15px;
      border: 3px dashed blue;
    }
    .btn:hover {
      background-color: orange;
      color: black;
      border: 3px solid blue;
    }
  </style>
</head>
<body>
  <h2>Result</h2>
  <p>Click below for result:</p>
  <button class="btn">Result</button>
</body>
</html>

:hover के सामान्य उपयोग:

• बटन/लिंक पर रंग, बैकग्राउंड, बॉर्डर बदलना
• टूलटिप/ड्रॉपडाउन मेनू दिखाना
• ट्रांसफॉर्म/स्केल प्रभाव (transform: scale(1.05))
• बॉक्स-शैडो/ग्लो प्रभाव

सर्वोत्तम अभ्यास: transition प्रॉपर्टी जोड़कर परिवर्तनों को सहज/एनिमेटेड बनाएं। टच डिवाइसेज पर होवर काम नहीं करता, इसलिए :active या टच इवेंट्स भी हैंडल करें।