W3CoreUI

Colored links.

Colored links with hover states. Click here

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.


<<p><a href="javascript:void(0);" class="link-primary">Primary link</a></p>
<p><a href="javascript:void(0);" class="link-secondary">Secondary link</a></p>
<p><a href="javascript:void(0);" class="link-success">Success link</a></p>
<p><a href="javascript:void(0);" class="link-danger">Danger link</a></p>
<p><a href="javascript:void(0);" class="link-warning">Warning link</a></p>
<p><a href="javascript:void(0);" class="link-info">Info link</a></p>
<p><a href="javascript:void(0);" class="link-light">Light link</a></p>
<p><a href="javascript:void(0);" class="link-dark">Dark link</a></p>
<p><a href="javascript:void(0);" class="link-body-emphasis">Emphasis link</a></p>

Link utilities

Colored links can also be modified by our link utilities.


<p><a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
<p><a href="javascript:void(0);" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="javascript:void(0);" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="javascript:void(0);" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="javascript:void(0);" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="javascript:void(0);" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="javascript:void(0);" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="javascript:void(0);" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="javascript:void(0);" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>