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.