استایل لینک‌ها

استایل‌دهی به لینک‌ها در CSS: hover، active، visited، حذف زیرخط و طراحی دکمه‌ای

استایل لینک در CSS

لینک‌ها (<a>) تعاملی‌ترین عناصر وب هستند. CSS چهار حالت مختلف برای لینک‌ها ارائه می‌دهد که هرکدام باید به‌درستی استایل شوند.

چهار حالت لینک (Pseudo-classes)

شبه‌کلاستوضیحترتیب
:linkلینک بازدیدنشده۱
:visitedلینک بازدیدشده۲
:hoverماوس روی لینک۳
:activeدر حال کلیک۴

قانون LVHA — ترتیب مهم است!

اگر ترتیب را رعایت نکنید، استایل‌ها بازنویسی می‌شوند:

/* ترتیب صحیح: L → V → H → A */
    a:link    { color: blue; }
    a:visited { color: purple; }
    a:hover   { color: red; }
    a:active  { color: orange; }

استایل پایه لینک

a {
        color: #3498db;
        text-decoration: none;    /* حذف زیرخط */
        transition: color 0.3s;   /* انیمیشن نرم */
    }

۱. استایل Hover

a:hover {
        color: #e74c3c;
        text-decoration: underline;
    }
    
    /* افکت زیرخط انیمیشنی */
    a {
        position: relative;
    }
    a::after {
        content: "";
        position: absolute;
        bottom: 0; left: 0;
        width: 0; height: 2px;
        background: #3498db;
        transition: width 0.3s;
    }
    a:hover::after {
        width: 100%;
    }

۲. لینک دکمه‌ای (Button Link)

.btn-link {
        display: inline-block;
        padding: 10px 30px;
        background: #3498db;
        color: white;
        border-radius: 25px;
        text-decoration: none;
        transition: all 0.3s;
    }
    
    .btn-link:hover {
        background: #2980b9;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    }

۳. لینک ناوبری (Navigation Links)

nav a {
        color: #333;
        padding: 10px 15px;
        border-radius: 4px;
        transition: background 0.3s;
    }
    
    nav a:hover {
        background: #f0f0f0;
    }
    
    nav a.active {
        background: #3498db;
        color: white;
    }

۴. استایل Lunk External (خارجی)

برای لینک‌های خارجی می‌توان آیکون اضافه کرد:

/* آیکون لینک خارجی */
    a[href^="http"]::after {
        content: " ↗";
        font-size: 0.8em;
        opacity: 0.7;
    }

۵. استایل لینک ایمیل و تلفن

a[href^="mailto:"] {
        color: #e74c3c;
    }
    
    a[href^="tel:"] {
        color: #2ecc71;
    }

۶. لینک Breadcrumb (مسیر سایت)

.breadcrumb a {
        color: #3498db;
        text-decoration: none;
    }
    
    .breadcrumb a:hover {
        text-decoration: underline;
    }
    
    .breadcrumb .separator {
        margin: 0 8px;
        color: #999;
    }

دسترس‌پذیری لینک

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط