14 / 11 / 2012

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

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;
    }

    »
    «
    »
    «

    A personal & design blog based in Malaysia. Blog is still under construction but enjoy your visit!

    Search this blog

    category

    Blogging Personal Tutorials Freebies Category Category

    subscribe this blog

    My Bloglist

    Sponsor


    Random post from this blog



    © 2011-2017 WANASEOBY.COM