CSS Nudge Effect To Blogger Links

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Nudge effect is a effect, when you place your mouse on a link, it will nudge. This effect developed with CSS3. Here is a demo of CSS3 nudge effect on blogger links. This effect looks nice on links. You can add this effect all the link or some selected links on blogger

View Demo

Nudge Effect To All Links

Blogger Dashboard → Design → Edit HTML

Now find the following code using F3

]]></b:skin>

Now Paste the following CSS code just above ]]></b:skin>

a:link {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}
a:hover {
margin-left: 12px;

Now save the template

Adding Nudge Effect To Selected Links

Blogger Dashboard → Design → Edit HTML

Now find the following code using F3

]]></b:skin>

Now Paste the following CSS code just above ]]></b:skin>

.nudg {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}
.nudg:hover {
margin-left: 12px;
}

Now save the template

Nudge Effect On Selected Links

Follow the below HTML code format

<a class="nudg" href="http://edutechnology.net/">Blogging Tips</a>

Please like our Facebook Page or Follow us on Twitter or Subscribe

If you like the article, please spend only 5 second to share with your friends

Tweet

Nudge effect is a effect, when you place your mouse on a link, it will nudge. This effect developed with CSS3. Here is a demo of CSS3 nudge effect on blogger links. This effect looks nice on links. You can add this effect all the link or some selected links on blogger View Demo Nudge Effect To All Links Blogger Dashboard → Design → Edit HTML Now find the following code using F3 ]]></b:skin> Now Paste the following CSS code just above ]]></b:skin> a:link { -moz-transition: all 0.1s ease-in 0s ; -webkit-transition: all 0.1s ease-in 0s ; -o-transition: all 0.1s ease-in 0s ; } a:hover { margin-left: 12px; Now save the template Adding Nudge Effect To Selected Links Blogger Dashboard → Design → Edit HTML Now find the following code using F3 ]]></b:skin> Now Paste the following CSS code just above ]]></b:skin> .nudg { -moz-transition: all 0.1s ease-in 0s ; -webkit-transition: all 0.1s ease-in 0s ; -o-transition: all 0.1s ease-in 0s ; } .nudg:hover { margin-left: 12px; } Now save the template Nudge Effect On Selected Links Follow the below HTML code format <a class="nudg" href="http://edutechnology.net/">Blogging Tips</a> Please like our Facebook Page or Follow us on Twitter or Subscribe If you like the article, please spend only 5 second to share with your friends