Ajax Loader
×

CSS Text Switcher

Text Switcher made by Benjamin mainly using CSS3 Transitions. Both the links / buttons contains two span tags (one that is shown before hovering and second that comes after hovering). The second span tag is hidden in both the buttons but in different ways. In first button, the second span tag is hidden by setting it's opacity to 0 and it's position as same as the first span so that it overlays the first one. When the button is hovered, the second span tag shows up with a fade transition by using CSS3's transition property.

In the second example, the second span tag is positioned below the first one (i.e. 30px from top) so that they both touch each other. When the button is hovered, both of them slide up by changing their top position and the second one comes up while the first one is hidden and gets positioned on top of the second span tag. 

This is pretty nice and light technique that works in most of the browsers except Internet Explorer because it doesn't support transition property.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS Text Switcher

    CSSDeck G+