Jassif Team Institution

HTML लिंक रंग

एक HTML लिंक एक अलग रंग में प्रदर्शित होता है, जो इस पर निर्भर करता है कि वह देखा गया है, नहीं देखा गया है या सक्रिय है।

डिफ़ॉल्ट रूप से, एक लिंक इस प्रकार दिखाई देगा (सभी ब्राउज़रों में):

लिंक का रंग बदलना

सीएसएस छद्म-वर्गों का उपयोग करके लिंक रंगों को अनुकूलित किया जा सकता है:

• a:link- न देखे गए लिंक के लिए
• a:visited- विज़िट किए गए लिंक के लिए
• a:hover- जब माउस ऊपर जाता है
• a:active- जब क्लिक किया गया

उदाहरण

यहां, एक अनविज़िट किया गया लिंक बिना अंडरलाइन के हरा है। विज़िट किया गया लिंक बिना रेखांकन के गुलाबी रंग का होता है। एक सक्रिय लिंक पीला और रेखांकित है। इसके अतिरिक्त, जब माउस को किसी लिंक (a:hover) पर घुमाया जाता है तो यह लाल हो जाता है और रेखांकित हो जाता है:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

कनेक्शन बटन

सीएसएस का उपयोग करके एक लिंक को एक बटन के रूप में स्टाइल किया जा सकता है:

उदाहरण

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

<a href="#">This is a link</a>

उन्नत उदाहरण

a.button {
  border-radius: 25px;
  padding: 12px 30px;
}

a.button {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

a.button {
  transition: all 0.3s ease;
}

a.button:hover {
  transform: translateY(-2px);
}

HTML लिंक टैग

अभ्यास

क्या यह सत्य है या असत्य कि सभी हाइपरलिंक डिफ़ॉल्ट रूप से रेखांकित होते हैं?

सर्वोत्तम अभ्यास