Colored Links

Link colors

You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

HTML Preview
<p><a href="#" class="link-primary">Primary link</a></p>

<p><a href="#" class="link-secondary">Secondary link</a></p>

<p><a href="#" class="link-success">Success link</a></p>

<p><a href="#" class="link-danger">Danger link</a></p>

<p><a href="#" class="link-warning">Warning link</a></p>

<p><a href="#" class="link-info">Info link</a></p>

<p><a href="#" class="link-light">Light link</a></p>

<p><a href="#" class="link-dark">Dark link</a></p>

<p><a href="#" class="link-body-emphasis mb-0">Emphasis link</a></p>

Link utilities

Colored links can also be modified by our link utilities.

HTML Preview
<p><a href="#" class="link-primary link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>

<p><a href="#" class="link-secondary link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>

<p><a href="#" class="link-success link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>

<p><a href="#" class="link-danger link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>

<p><a href="#" class="link-warning link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>

<p><a href="#" class="link-info link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>

<p><a href="#" class="link-light link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>

<p><a href="#" class="link-dark link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>

<p><a href="#" class="link-body-emphasis link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-75-hover mb-0">Emphasis link</a></p>

Link Opacity

Change the alpha opacity of the link rgba() color value with utilities. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.

HTML Preview
<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>

<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>

<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>

<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>

<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>

Link Opacity Hover

HTML Preview
<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>

<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>

<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>

<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>

<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>

Underline color

HTML Preview
<p><a href="#" class="text-decoration-underline link-underline-primary">Primary underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-secondary">Secondary underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-success">Success underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-danger">Danger underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-warning">Warning underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-info">Info underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-light">Light underline</a></p>

<p class="mb-0"><a href="#" class="text-decoration-underline link-underline-dark">Dark underline</a></p>

Underline opacity

Change the underline’s opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.

HTML Preview
<p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
    
<p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>

<p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>

<p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>

<p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>

<p class="mb-0"><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>

Underline offset

Change the underline’s distance from your text. Offset is set in em units to automatically scale with the element’s current font-size.

HTML Preview
<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>

<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>

<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>

<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>

<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>

<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>

Icon link

Take a regular <a> element, add .icon-link, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.

HTML Preview
<a class="icon-link" href="#">
    <i class="bi bi-box-seam align-baseline"></i> Icon link
</a>

<a class="icon-link" href="#">
    Icon link <i class="bi bi-arrow-right"></i>
</a>

<a class="icon-link icon-link-hover" href="#">
    Icon link <i class="bi bi-arrow-right"></i>
</a>

<a class="icon-link icon-link-hover" style="--tb-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
    <i class="bi bi-clipboard"></i> Icon link
</a>

<a class="icon-link icon-link-hover" style="--tb-link-hover-color-rgb: var(--tb-success-rgb);" href="#">
    Icon link <i class="bi bi-arrow-right"></i>
</a>

<a class="icon-link icon-link-hover link-success text-decoration-underline link-underline-success link-underline-opacity-25" href="#">
    Icon link <i class="bi bi-arrow-right"></i>
</a>
© Steex.
Design & Develop by Themesbrand