Sexy Link Transformations with CSS

By  on  

CSS Transformation Links

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!

The 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!

Recent Features

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    MooTools FontChecker Plugin

    There's a very interesting piece of code on Google Code called FontAvailable which does a jQuery-based JavaScript check on a string to check whether or not your system has a specific font based upon its output width. I've ported this functionality to MooTools. The MooTools...

  • By
    Fx.Rotate:  Animated Element Rotation with MooTools

    I was recently perusing the MooTools Forge and I saw a neat little plugin that allows for static element rotation: Fx.Rotate. Fx.Rotate is an extension of MooTools' native Fx class and rotates the element via CSS within each A-grade browser it...

Discussion

  1. You thief! :D

    Notice that the transforms for each browser were created automatically, not all browsers support transforms/transitions correctly yet. I just put the prefixes in there so I don’t have to in the future.

  2. Oh right, and setting the scale(1) rotate(0) for the initial state fixed a bug on iOS where after hovering the link disappeared for a short time.

  3. @Christoph:

    Why thief?

    Good tut, David. Have to practice CSS3 anyway.

  4. Anton Samper

    awesome effect, very nice!!!

  5. Marco Barbosa

    Can’t you use shorthands?

    Like:
    -moz-transition: [ || || || ]

    There’s also for -webkit..

    The code looks a bit spaghetti otherwise..

    Nice animation nevertheless !

  6. @Milos: I was kidding
    @Marco: I used SASS Mixins to create that output, so I never really had a look at the CSS

  7. That’s really cool. As an effect, that’s awesome.

    Like like like.

    Also, god, I need to start using SASS or something similar.. pssh!

  8. Adrian Westlake

    Like it, although text a little distorted (FF).

    Love your little popup search tool on text select on this site by the way

  9. Wow, really nice effect ;)

  10. For some reason my browser crashes when I try to watch the demo, odd. Nice effect though (crashing browser: Firefox 4.0b2pre, worked in Chrome though)

  11. @WouterToering: I don’t believe for one moment that Firefox would crash…hahahaha.

  12. nice but it seems we’re turning back in 90ies :)

  13. I’ve always believed these effects should be done with CSS … Leave JavaScript for the other stuff …

    It’s nice … Doesn’t work on IE8 but who give a damn?

  14. IE doesn’t do cool which is a shame – fingers crossed for 9. A very nice effect, already stuck a variation on the tags section of my site :)

  15. Cool effect, i love it!

  16. @Dan: IE 9 would’t be support this kind of CSS3 effect yet, I think.
    It would be rendered like we look at it now in FF 3.x

  17. WouterToering

    Well it’s still happening in the latest Nightly, on Windows 7 x64.

  18. Matt

    I don.t really see what the big deal is. Nothing more than hover background color with changing the font color, rounded corners for FF, but not IE.

    I’m not seeing any title effect – w/IE or FF.

  19. Matt

    whoops thats “tilt” effect, lol.

  20. @Matt: have a look at it via Safari/Chrome
    @WouterToering: Yeah, Firefox likes to Crash. Ditch Firefox, switch to Chrome or Safari =)
    @Adrian: yeah, Font-Rendering isn’t the best in every browsers at the moment.

  21. Matt

    Ok, gotcha.

    Neat!

    Thanks.

  22. Lolki

    Hey ! Scipt and Style is dead ! Domaine has expired ! Wake up David !

  23. devlim

    Nice, but not that smooth in safari 5 when mouse leave the links.
    and very smooth in chrome~

  24. very nice fx! (will microsoft get a move on & get up to speed with IE 9. ?

  25. Laurens

    While using a text-shadow in the a:hover, the shadow gets the color of the text while the transition is active in Google Chrome.

    text-shadow: 1px 1px black;

    This will show a white text-shadow while the transition is active.

  26. Randy

    how do you automatically detect and don’t user it if it’s a link on image
    assuming i use it for all links, not manually add links

    thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!