11/15/2012

How to style link hover - Style 5,6, and 7

11/15/2012

To use this link hover,  paste the codes under </style> for Classic Template users. For Blogger Template Designer, paste the codes above/before ]]></b:skin>




  • Style 5

  • I feel like I'm under a spell
    a:link,a:visited{
    text-decoration:none;
    color:#aaa;-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    box-shadow:inset 0 0px 0px #FFA4A4;
    padding:2px;
    }
    a:hover{
    color:#fff;
    box-shadow:inset 0 50px 8px #FFA4A4;
    }

  • Style 6
  • I feel like I'm under a spell
    a:link,a:visited{
    text-decoration:none;
    color:#aaa;-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    box-shadow:inset 0 0px 0px #C6D4F3;
    padding:2px;
    }
    a:hover{
    color:#fff;
    box-shadow:inset 0 -50px 0px #C6D4F3;
    }




  • Style 7

  • I feel like I'm under a spell
    a:link,a:visited{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    text-decoration:none;
    box-shadow:inset 0px 0px 0px #FEA5A5,inset 0px 0px 0px #FAC3BA;
    color:#888;
    padding:2px;

    }
    a:hover{
    box-shadow:inset 0px 14px 0px #FEA5A5,inset 0px -14px 0px #FAC3BA;
    color:#fff;
    }