Tachyons Element Links
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;" > w3wiki </ h2 > < h3 style = "text-align:center;" > A computer science portal for Beginner</ 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;" > w3wiki </ h2 > < h3 style = "text-align:center;" > A computer science portal for Beginner </ 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 > |
Output:
Reference: https://tachyons.io/docs/elements/links/
Contact Us