Tachyons Element Links

Last Updated : 11 Jun, 2022

Tachyon is a toolkit that is used to make a responsive website. In this article, we will learn about how to insert a clickable link using the Tachyons toolkit. Links are used to specifying the relationship between the current document and an external resource.

Tachyons Element Links Classes:

link underline blue hover-orange: This class is used to provide a blue underlined link that turns orange on the hover.
link underline-hover red: This class is used to add an underline on hover and focus.
dim: This class is used to dim a link on hover.

Add background colour on hover class:

link black hover-bg-light-blue: This class is used to add any background colour from the skins-pseudo module.

Animate background colours on hover:

link black bg-animate hover-bg-light-blue: This class is used to add any background colour from the skins-pseudo module.

Classes used to provide coloured links:

link dim black: This class is used to provide a “dim black” effect to the link.
link dim near-black: This class is used to provide a “dim near-black” effect to the link.
link dim dark-gray: This class is used to provide a “dim dark-gray” effect to the link.
link dim mid-gray: This class is used to provide a “dim mid-gray” effect to the link.
link dim gray: This class is used to provide a “dim gray” effect to the link.
link dim black-90: This class is used to provide a “dim black-90” effect to the link.
link dim black-80: This class is used to provide a “dim black-80” effect to the link.
link dim black-70: This class is used to provide a “dim black-70” effect to the link.
link dim black-60: This class is used to provide a “dim black-60” effect to the link.
link dim black-50: This class is used to provide a “dim black-50” effect to the link.
link dim navy: This class is used to provide a “dim navy” effect to the link.
link dim dark-blue: This class is used to provide a “dim dark-blue” effect to the link.
link dim blue: This class is used to provide a “dim blue” effect to the link.
link dim dark-red: This class is used to provide a “dim dark-red” effect to the link.

Syntax:

<a href="#" class="link dim blue">...</a>

Example 1: In the below code, we have used the “link underline blue hover-orange” class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        body { 
            background-color: lightgrey; 
        } 
  
        div { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green;text-align:center;"> 
        GeeksforGeeks 
    </h2> 
    <h3 style="text-align:center;"> 
        A computer science portal for geeks</h3> 
  
    <div> 
        <a href="#" class="link underline blue hover-orange"> 
            link text</a> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: In the below example, we will insert various different coloured links.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        body { 
            background-color: lightgrey; 
        } 
  
        div { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green; text-align:center;"> 
        GeeksforGeeks 
    </h2> 
      
    <h3 style="text-align:center;"> 
        A computer science portal for geeks 
    </h3> 
  
    <div> 
        <a href="#" class="link dim black">black link</a><br> 
        <a href="#" class="link dim dark-gray">dark-gray link</a><br> 
        <a href="#" class="link dim mid-gray">mid-gray link</a><br> 
        <a href="#" class="link dim gray">gray link</a><br> 
        <a href="#" class="link dim black-90">black-90 link</a><br> 
        <a href="#" class="link dim black-80">black-80 link</a><br> 
        <a href="#" class="link dim black-70">black-70 link</a><br> 
        <a href="#" class="link dim black-60">black-60 link</a><br> 
        <a href="#" class="link dim black-50">black-50 link</a><br> 
        <a href="#" class="link dim navy">navy link</a><br> 
        <a href="#" class="link dim dark-blue">dark-blue link</a><br> 
        <a href="#" class="link dim blue">blue link</a><br> 
        <a href="#" class="link dim dark-red">dark-red link</a><br> 
    </div> 
</body> 
  
</html> 