Creative link effects in pure CSS

What is that? Creative link effects – over 20 modern link effects (sliding, flipping, 3D rotation, etc), using CSS3 transitions.

Creative link effects using transitions on pseudo-elements

In presented article, authors would like to share some experimental and creative link effects. The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation.

Pure CSS creative links
Pure CSS creative links

There is a set of ready to use types (styles). In most cases the HTML is simply a nav with some anchors:

<nav class="cl-effect-15">
  <a href="#">Beleaguer</a>
  <a href="#">Lassitude</a>
  <a href="#">Murmurous</a>
  <a href="#">Palimpsest</a>
  <a href="#">Assemblage</a>
</nav>

Sample CSS:

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
  color: rgba(0,0,0,0.2);
  font-weight: 700;
  text-shadow: none;
}

.cl-effect-15 a::before {
  color: #fff;
  content: attr(data-hover);
  position: absolute;
  transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
  transform: scale(0.9);
  opacity: 0;
}

Demo:

http://tympanus.net/Development/CreativeLinkEffects

Full article and download:

http://tympanus.net/codrops/2013/08/06/creative-link-effects

Project on GitHub:

https://github.com/codrops/CreativeLinkEffects

Explore your creativity!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1