Presently we are very much conscious about the look and feel of our blog or website. For different reason we use hyper link text or block to highlight different section. Let’s see, we can draw this by any other way without using JavaScript or jQuery. Here I will explain a simple transitional mouse hover effect with the help of purely CSS. Check this screen shot.
In the screen shot you can see the blue background effect on normal condition and the purple background effect on mouse hover. But this is not the trick. The changing of the colour will happen with a transition effect from light blue –> light purple –> Original purple colour within 0.5 second time span.
This is the simple HTML block text where I have put the hyper-linked text inside a DIV and main part of the CSS which calls the transitional effect.
If you have any idea to make this script more cool, please post your comment here. I have tested this script on latest version of Firefox, Google Chrome, Opera, Safari and Internet Explorer 9 and it is working fine. Please don’t ask for any update of this script for Internet Explorer 7 or prior versions as those engines do not support CSS3.
Leave a Reply