Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


npm version bower version FOSSA Status

Configurable css module for rendering links.


npm install links.less --save-dev

bower install links.less --save

or use compiled version from CDN

Usage in HTML

See demo on Codepen.

Default colors apply to all links and classnames .link, .link-novisited, .link-inherit.

Custom :focus styles and animation apply only to links that has no class attribute (a:not[class]) and .link, .link-novisited, .link-inherit.


Use .link to apply styles to any tag:

<a class="mytag link" href="#">customized link</span>
<span class="link" tabindex="0">pseudolink</span>
<button class="link">button</button>


Links with class .link-novisited never look like :visited. Good for navigation for example.

    <a class="link-novisited" href="">google</a>
    <a class="link-novisited" href="">github</a>
    <a class="link-novisited" href="">codepen</a>


Links with class .link-inherit use same color as parent element for :link and :visited states. Good if you want to make links in footer less prominent.

<footer style="color:#999">
    © <a class="link-inherit" href="http//">Paul Radzkov</a> 2017.

Usage in LESS

Install library with npm install links.less --save-dev and include its main file inside your project less file:

@import (less) "node_modules/links.less/links.less";

That is enough to run library with default parameters.

To customize settings add .links-settings() mixin after import and redefine any parameter:

@import (less) "node_modules/links.less/links.less";

.links-settings() {
    @links-class: pseudolink; //you can rename that classname
    @links-text-decoration: none;
    @links-roundness: 0;
    @links-focuswidth: 0;
    @links-aniduration: .5s;

Default settings

All list of settings:

.links-settings() {
    @links-class: link; //you can rename that classname
    @links-text-decoration: underline;
    @links-roundness: 0.125em;   // default = 2px
    @links-focuswidth: 0.1875em; // default = 3px
    @links-link:          #0877db;
    @links-hover:         #2b9aff;
    @links-visited:       #9108db;
    @links-visitedhover:  #bc4df8;
    @links-active:        #bc4df8;
    @links-fadeout: 75%;  // amount of transparency added to underline
    @links-aniduration: .3s; //fading duration from hover

Using mixin for coloring your own links

You can recolor links with .links-color() mixin:

@import (less) "node_modules/links.less/links.less";

.links-settings() {
    // your customized parameters

.mycustomlink {

You can pass from 1 to 6 arguments to mixin. See the mapping scheme:

.links-color(@link-color, @hover-color);
.links-color(@link-color, @hover-color, @visited-color);
.links-color(@link-color, @hover-color, @visited-color, @active-color);
.links-color(@link-color, @hover-color, @visited-color, @visitedhover-color, @active-color);
.links-color(@link-color, @hover-color, @visited-color, @visitedhover-color, @active-color, @fadeout);

The last one @fadeout by default has value 75% and refers to amount of transparency added to underline.


FOSSA Status