links.css

For nicer defaults

View on github Tweet This


- install with npm -

npm install --save-dev links.css

About

For default link styles I want - nice, subtle color animations. I want nicer colors that meet accessibility guidelines. And I don't want visited links to be styled differently then regular links. This css modules solves those problems for me in a tidy 155B of css.

The palette

:link
:visited
:hover
:active

Examples

underlined link

simple link

Links in prose

Links in browsers should be better by default. The default colors are horrid. The lack of subtle transitions between state changes leaves all my users sitting around without 'delight'. So links.css is a result of typing the same silly css over and over again. It's a very small css module that gives you better links by default. It is unobtrusive and degrades gracefully across every browser.

The Code

html


<a href="http://mrmrs.io" title="A sample text link">underlined link</a>
<a href="http://mrmrs.io/links" title="A sample text link" class="link">simple link</a>

css


a {
  transition: color .4s;
  color: #265C83;
}
a:link,
a:visited { color: #265C83; }
a:hover   { color: #7FDBFF; }
a:active  {
  transition: color .3s;
  color: #007BE6;
}
.link { text-decoration: none; }

Note:
This is such a small css module you'll want to include it as a partial in your preprocessor setup - or you'll want to just copy the css into the top of your sites css file.