David Walsh Blog

Sexy Link Transformations with CSS

I was recently visiting MooTools Developer Christoph Pojer’s website and noticed a sexy link hover effect:  when you hover the link, the the link animates and tilts to the left or the right.  To enhance the effect, the background color of the link is changed.  I scoped out his JavaScript file to see how he created the effect but there were no link effects in it — the effects were being created with just CSS!


.cpojer-links a	{
	display: inline-block;
	padding: 4px;
	outline: 0;
	color: #3a599d;
	transition-duration: 0.25s;
	transition-property: transform;
	transform: scale(1) rotate(0);
.cpojer-links a:hover {
	background: #3a599d;
	text-decoration: none;
	color: #fff;
	border-radius: 4px;
	transform: scale(1.05) rotate(-1deg);
.cpojer-links a:nth-child(2n):hover {
  transform: scale(1.05) rotate(1deg);

Christoph utilized the transition functionality of each browser (since each has their own prefix.)  The transition duration is set to 250 milliseconds and the scale/rotate is given to a default setting.  The hover state is given a background color (and rounded corners to enhance the effect) and the scale/rotate are changed to tilt the link.  Lastly, even links are rotated the opposition direction just to add a bit more style!

Christoph’s link effect is very creative, requires a small amount of code, and isn’t an over-the-top-effect.  It’s exciting to know these effects can be done with simple CSS!