Menu For Beqiutors

Senin, 28 Januari 2013

Full Of Link Hover Tutorials

Faradina Fazira | 02.25 |
Cari Code
a:link,a:visited{
Dan
a:hover{ 
Hapus Anak Code a:link,a:visited{ DAN a:hover{ beaserta code Lalu Ganti code bawah ini (pilih) 












  • Style 1



  • 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;
    }
    a:hover{
    color:#fff;
    background:#111;
    }















  • Style 2

  • a:link,a:visited{
    text-decoration:none;'
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    border-bottom:2px solid transparent;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    color:#aaa;
    }
    a:hover{
    border-bottom:2px solid #FF6C6C;
    }














  • Style 3

  • 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 4
  • 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 5

  • 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{
    text-decoration:none ;
    color:#BDA291 ;cursor:pointer;
    -webkit-transition:All 0.4s ease ;
    -moz-transition:All 0.4s ease ;
    -o-transition:All 0.4s ease ; }
    a:hover{
    color:#fff ;
    background:url(http://24.media.tumblr.com/tumblr_m1f2u4jjAC1qbc0uoo1_500.jpg);
    background-position:50% 80%;
    background-size:400px;
    }





    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-shadow:-1px 10px 3px #333333;
    text-decoration:none;}


    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-shadow: 0.2em 0.5em 0.1em #600,-0.3em 0.1em 0.1em #060,0.4em -0.3em 0.1em #006;
    text-decoration:none;}


    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color: #fff;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    text-decoration:none;}


    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-shadow: 2px 0 .2px #FF0000;
    text-decoration:none;}


    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-shadow: -2px 0 .2px #00F1F5;
    text-decoration:none;}


    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
    text-decoration:none;}


    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    letter-spacing:3px;}


    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    letter-spacing:-3px;}



    Link Hover Type One  :  example one

    a:link,a:visited{
    color:#000;
     border-bottom:2px solid #DBB8FF;
    -webkit-transition: 0.4s;
     -moz-transition: 0.4s;
    text-decoration:none;} 

    a:hover{
    border-bottom:20px solid transparent;
    -webkit-transition: 0.4s;
     -moz-transition: 0.4s;}

    Link Hover Type Two  :  example two

    a:link,a:visited{ 
    border-bottom:2px solid #DBB8FF;
    color:pink;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    padding-bottom:0px;} 

    a:hover{ 
    padding-bottom:12px;
    border-bottom:20px solid transparent;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;}

    Link Hover Type Three  :  example three

    a:link,a:visited{ 
    border-bottom:2px solid transparent;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    padding-bottom:18px;} 

    a:hover{ 
    padding-bottom:2px;
    border-bottom:2px solid #DBB8FF;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;}

    Link Hover Type Four  :  example four

    a:link,a:visited{ 
    border-bottom:2px solid #DBB8FF;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    padding-bottom:0px;} 

    a:hover{ 
    padding-bottom:18px;
    border-bottom:2px solid transparent;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;}

    Link Hover Type Five  :  example five

    a:link,a:visited{ 
    line-height: 0%;
    color:#000;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;} 

    a:hover{ 
    background: #DBB8FF;
    line-height: 20%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;}

    Link Hover Type One  :  example one

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:overline;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:underline;}

    Link Hover Type Two  :  example two

    a:link,a:visited{
    text-decoration:none;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    border-bottom:5px groove transparent;}

    a:hover{
    text-decoration:none;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    border-bottom:5px groove #aaa;}

    Link Hover Type Three  :  example three

    a:link,a:visited{
    text-decoration:none;
    border-bottom:1px dashed #000;
    padding:2px;
    color:pink;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    border-bottom:10px dashed transparent;}

    Link Hover Type Four  :  example four

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    color:pink;
    border-bottom:1px dashed #000;
    border-radius:10px;
    padding:5px 10px 2px 10px;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    border-bottom:1px dotted #000;
    padding:5px 10px 2px 10px;}

    Link Hover Type Five  :  example five

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    color:pink;
    background:transparent;
    padding-top:8px;
    padding-bottom:34px;}

    a:hover{
    text-decoration:none;
    background:url(http://1.bp.blogspot.com/-htar_GuUrns/TnnJBIk9Q_I/AAAAAAAABo4/SyjesaWuutU/s1600/blueunderline.png) no-repeat right bottom;
    padding-top:8px;
    padding-bottom:1px;}

    Link Hover Type Six  :  example six

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    background:url(http://media.tumblr.com/tumblr_lnvuybv4MQ1qepbs7.gif) no-repeat left top;
    padding-left:20px;}

    Link Hover Type Seven  :  example seven

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    color:pink;
    background:transparent;
    padding-top:8px;
    padding-bottom:12px;}

    a:hover{
    text-decoration:none;
    background:url(http://1.bp.blogspot.com/-htar_GuUrns/TnnJBIk9Q_I/AAAAAAAABo4/SyjesaWuutU/s1600/blueunderline.png) repeat right top;
    padding-top:8px;
    padding-bottom:10px;}

    Link Hover Type Eight  :  example eight

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    background:transparent;
    padding-top:8px;
    padding-bottom:12px;}

    a:hover{
    text-decoration:none;
    background:url(http://1.bp.blogspot.com/-htar_GuUrns/TnnJBIk9Q_I/AAAAAAAABo4/SyjesaWuutU/s1600/blueunderline.png) repeat right bottom;
    padding-top:8px;
    padding-bottom:8px;}

    Link Hover Type Nine  :  example nine

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    padding:5px;}

    a:hover{
    text-decoration:none;
    background:url(http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif) repeat ;}

    Link Hover Type Ten  :  example ten

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    padding:2px;
    border-bottom:2px solid pink;}

    a:hover{
    text-decoration:none;
    background:pink;}


    Link Hover Type One  :  example one

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:overline;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:underline;}

    Link Hover Type Two  :  example two

    a:link,a:visited{
    text-decoration:none;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    border-bottom:5px groove transparent;}

    a:hover{
    text-decoration:none;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    border-bottom:5px groove #aaa;}

    Link Hover Type Three  :  example three

    a:link,a:visited{
    text-decoration:none;
    border-bottom:1px dashed #000;
    padding:2px;
    color:pink;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    border-bottom:10px dashed transparent;}

    Link Hover Type Four  :  example four

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    color:pink;
    border-bottom:1px dashed #000;
    border-radius:10px;
    padding:5px 10px 2px 10px;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    border-bottom:1px dotted #000;
    padding:5px 10px 2px 10px;}

    Link Hover Type Five  :  example five

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    color:pink;
    background:transparent;
    padding-top:8px;
    padding-bottom:34px;}

    a:hover{
    text-decoration:none;
    background:url(http://1.bp.blogspot.com/-htar_GuUrns/TnnJBIk9Q_I/AAAAAAAABo4/SyjesaWuutU/s1600/blueunderline.png) no-repeat right bottom;
    padding-top:8px;
    padding-bottom:1px;}

    Link Hover Type Six  :  example six

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    background:url(http://media.tumblr.com/tumblr_lnvuybv4MQ1qepbs7.gif) no-repeat left top;
    padding-left:20px;}

    Link Hover Type Seven  :  example seven

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    color:pink;
    background:transparent;
    padding-top:8px;
    padding-bottom:12px;}

    a:hover{
    text-decoration:none;
    background:url(http://1.bp.blogspot.com/-htar_GuUrns/TnnJBIk9Q_I/AAAAAAAABo4/SyjesaWuutU/s1600/blueunderline.png) repeat right top;
    padding-top:8px;
    padding-bottom:10px;}

    Link Hover Type Eight  :  example eight

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    background:transparent;
    padding-top:8px;
    padding-bottom:12px;}

    a:hover{
    text-decoration:none;
    background:url(http://1.bp.blogspot.com/-htar_GuUrns/TnnJBIk9Q_I/AAAAAAAABo4/SyjesaWuutU/s1600/blueunderline.png) repeat right bottom;
    padding-top:8px;
    padding-bottom:8px;}

    Link Hover Type Nine  :  example nine

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    padding:5px;}

    a:hover{
    text-decoration:none;
    background:url(http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif) repeat ;}

    Link Hover Type Ten  :  example ten

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    padding:2px;
    border-bottom:2px solid pink;}

    a:hover{
    text-decoration:none;
    background:pink;}



    Link Hover Type One  :  example one

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    padding:2px;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    -webkit-background-clip: text;
    color: white;
    -webkit-text-fill-color: transparent;
    background-image:-webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
    background-image:-webkit-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
    background-image:-moz-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
    background-image:-ms-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
    background-image:-o-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);}

    Link Hover Type Two  :  example two

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    padding:2px;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    color: white;
    background-image:-webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
    background-image:-webkit-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
    background-image:-moz-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
    background-image:-ms-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
    background-image:-o-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);}

    Link Hover Type Three  :  example three

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    padding:4px;
    border-radius: 10px 0px 10px 0px;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-decoration:none;
    background:#000;}

    Link Hover Type Four  :  example four

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    padding:4px;
    border-top:2px solid transparent;
    border-bottom:2px solid transparent;
    border-radius: 10px ;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    border-top:2px solid pink;
    border-bottom:2px solid pink;
    text-decoration:none;}

    Link Hover Type Five  :  example five

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    padding:4px;
    border-right:2px solid transparent;
    border-left:2px solid transparent;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    border-right:2px solid pink;
    border-left:2px solid pink;
    text-decoration:none;}

    Link Hover Type Six  :  example six

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;
    padding:4px;
    background:transparent;
    box-shadow: inset 0px 0 0px 0 brown;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    overflow:hidden;
    box-shadow: inset 200px 0 0px 0 brown;
    text-decoration:none;}

    Link Hover Type Seven  :  example seven

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-shadow:100px 0px 0px #333333;
    text-decoration:none;}

    Link Hover Type Eight  :  example eight

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-shadow:10px 10px 1px #333333;
    text-decoration:none;}

    Link Hover Type Nine  :  example nine

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-shadow:0px -10px 1px #333333;
    text-decoration:none;}

    Link Hover Type Ten  :  example ten

    a:link,a:visited{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    color:pink;
    text-decoration:none;}

    a:hover{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    text-shadow:-1px 0px 9px #333333;
    text-decoration:none;}

    Tidak ada komentar: