Last Updated: February 25, 2016
· timpietrusky

Pimp my link with CSS transform

Do you want to be the cool kid? Then you should pimp your links with CSS transform.

Before we start...

I use prefixfree to avoid the vendor prefix hell... so should you!

Here we go

Prepare the link

To enable transform on a link, we need to change it into a transformable element

a {

Apply the transforms

.scale a:active {
  transform: scale(.85);

.rotate a:active {
  transform: rotateY(180deg);

.skew a:active {
  transform: skewX(30deg);

.translate a:active {
  transform: translateY(.25em);

.mixed a:active {
  transform: scale(.85) rotateY(180deg) skewX(30deg) translateY(.25em);

Full source & live version

Inspired by the protip of Sultan Tarimo

1 Response
Add your response

Nice tips ... I like the "scale" better, thanks for sharing.

over 1 year ago ·