📘 Lesson · Lesson 14

Styling Links and Hover

Links और Hover Styling

The Four Link States

a:link    { color: blue; }      /* normal, unvisited link */
a:visited { color: purple; }    /* a link already visited */
a:hover   { color: red; }       /* while the mouse is over it */
a:active  { color: orange; }    /* the moment it's being clicked */

Links are special: they have four states, each stylable separately using pseudo-classes (the : keywords). A link can be normal (:link), already visited (:visited), hovered (:hover), or being clicked (:active). This is why links feel interactive — the browser's default blue/purple/underline is just these states pre-styled. Now you control them. By far the most-used is :hover, the effect when the mouse rests on a link.

The LoVe-HAte Order — a must-know rule

a:link     { }   ┐
a:visited  { }   ├─ LoVe
a:hover    { }   ┐
a:active   { }   ┘─ HAte

The states must be written in this exact order — Link, Visited, Hover, Active — or some won't work. The famous memory trick is "LoVe-HAte": Link, Visited, Hover, Active. Why does order matter? Because these have equal specificity, so later rules override earlier ones; the LoVe-HAte order ensures hover can override visited, and active can override hover, correctly. This is a classic interview question — remember LoVe-HAte and you'll never get link states wrong.

Styling Links Nicely

a {
    color: #2563eb;
    text-decoration: none;      /* remove default underline */
    font-weight: 500;
}
a:hover {
    color: #1e40af;             /* darker on hover */
    text-decoration: underline; /* underline appears on hover */
}

A styled link: no underline normally, turns darker with an underline on hover

A common modern pattern: remove the underline by default (text-decoration: none) for a clean look, then bring it back on :hover as a subtle interaction cue. Combined with a colour shift, this makes links feel responsive and polished. You don't need all four states for simple sites — styling the base a and a:hover covers most needs beautifully.

Hover Effects — the interactive touch

.btn {
    background: #2563eb;
    color: white;
    padding: 10px 20px;
    transition: background 0.3s;   /* smooth the change */
}
.btn:hover {
    background: #1e40af;            /* darken on hover */
}

Hover effects make a page feel alive. The magic addition here is transition: without it, the colour SNAPS instantly on hover; with transition: background 0.3s, it fades smoothly over 0.3 seconds — that professional, gentle feel every good button has. Transitions get their own chapter, but this pairing (:hover + transition) is so fundamental to good UI that it's worth knowing now. Any element can have hover effects, not just links.

Links as Buttons — style an anchor

<a href="/signup/" class="btn">Sign Up Free</a>

.btn {
    display: inline-block;     /* so padding/width work fully */
    background: #16a34a;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
}

Those attractive "button" links everywhere are just anchors with CSS. A real <a> (so it navigates) styled to LOOK like a button: a background colour, padding, rounded corners (border-radius), no underline. The key extra is display: inline-block — links are inline by default, and inline elements ignore some padding/sizing; inline-block fixes that so the button gets its full clickable padded area. This is the standard way to make call-to-action buttons that are actually links.

Exam Corner

Q: Name the four link states. :link, :visited, :hover, :active.

Q: What order must they be written in and why? LoVe-HAte (link, visited, hover, active) — so equal-specificity rules override correctly.

Q: How do you remove a link's underline? text-decoration: none;

Q: What makes a hover colour change smooth? The transition property.

Q: Why use display: inline-block on a link styled as a button? So padding and sizing apply fully (inline elements ignore some of it).

चार Link States

a:link    { color: blue; }      /* normal, bina visit link */
a:visited { color: purple; }    /* pehle se visited link */
a:hover   { color: red; }       /* jab mouse upar ho */
a:active  { color: orange; }    /* jis pal click ho raha ho */

Links खास हैं: उनकी चार states हैं, हर एक pseudo-classes (: keywords) से अलग style होने वाली. Link normal (:link), पहले से visited (:visited), hovered (:hover), या click हो रहा (:active) हो सकता है. इसीलिए links interactive लगते हैं — browser का default blue/purple/underline बस ये states pre-styled हैं. अब आप उन्हें control करते हैं. सबसे ज़्यादा use होने वाला :hover है, mouse link पर टिकने का effect.

LoVe-HAte Order — ज़रूरी rule

a:link     { }   ┐
a:visited  { }   ├─ LoVe
a:hover    { }   ┐
a:active   { }   ┘─ HAte

States इसी exact order में लिखनी चाहिए — Link, Visited, Hover, Active — वरना कुछ काम नहीं करेंगी. मशहूर memory trick है "LoVe-HAte": Link, Visited, Hover, Active. Order क्यों मायने रखता है? क्योंकि इनकी specificity बराबर है, तो बाद के rules पहले वाले override करते हैं; LoVe-HAte order पक्का करता है hover visited को override कर सके, और active hover को, सही तरीके से. यह classic interview सवाल है — LoVe-HAte याद रखिए और link states कभी गलत नहीं होंगी.

Links अच्छे से Style करना

a {
    color: #2563eb;
    text-decoration: none;      /* default underline hatao */
    font-weight: 500;
}
a:hover {
    color: #1e40af;             /* hover par gehra */
    text-decoration: underline; /* hover par underline aata hai */
}

Styled link: normal me underline nahi, hover par gehra underline ke saath

Common modern pattern: साफ look के लिए default underline हटाइए (text-decoration: none), फिर :hover पर उसे subtle interaction cue के रूप में वापस लाइए. Colour shift के साथ मिलकर यह links को responsive और polished महसूस कराता है. सरल sites के लिए चारों states की ज़रूरत नहीं — base a और a:hover style करना ज़्यादातर ज़रूरतें खूबसूरती से पूरी करता है.

Hover Effects — interactive touch

.btn {
    background: #2563eb;
    color: white;
    padding: 10px 20px;
    transition: background 0.3s;   /* badlav smooth karo */
}
.btn:hover {
    background: #1e40af;            /* hover par gehra */
}

Hover effects page को जीवंत बनाते हैं. यहां जादुई जोड़ है transition: इसके बिना hover पर colour तुरंत SNAP करता है; transition: background 0.3s के साथ यह 0.3 सेकंड में smoothly fade होता है — वही professional, कोमल feel जो हर अच्छे button में होती है. Transitions को अपना chapter मिलता है, पर यह जोड़ी (:hover + transition) अच्छे UI के लिए इतनी बुनियादी है कि अभी जानने लायक है. किसी भी element के hover effects हो सकते हैं, सिर्फ links के नहीं.

Links को Buttons बनाना — anchor style करना

<a href="/signup/" class="btn">Sign Up Free</a>

.btn {
    display: inline-block;     /* taaki padding/width poora kaam kare */
    background: #16a34a;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
}

हर जगह वे आकर्षक "button" links बस CSS वाले anchors हैं. असली <a> (ताकि navigate करे) button जैसा DIKHNE को styled: background colour, padding, rounded corners (border-radius), बिना underline. मुख्य extra है display: inline-block — links default रूप से inline होते हैं, और inline elements कुछ padding/sizing ignore करते हैं; inline-block इसे ठीक करता है ताकि button को पूरा clickable padded area मिले. Call-to-action buttons बनाने का यह standard तरीका है जो असल में links हैं.

Exam Corner

Q: चार link states बताइए. :link, :visited, :hover, :active.

Q: किस order में लिखनी चाहिए और क्यों? LoVe-HAte (link, visited, hover, active) — ताकि बराबर-specificity rules सही override हों.

Q: Link का underline कैसे हटाते हैं? text-decoration: none;

Q: Hover colour change smooth कैसे होता है? transition property से.

Q: Button जैसे styled link पर display: inline-block क्यों? ताकि padding और sizing पूरा लगे (inline elements कुछ ignore करते हैं).

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.