10 Efek Gila dengan CSS3 Border Transitions

body {
padding: 10px 0 0 10px;
}

a {
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:100px;
    height:100px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpyk_kTdWKpRZKuQcqcPvL4bGIXllBtbLCeErOIvBh9rvsfnfwg7OoSFMokOSj8BlMbeIFmJ4eOKohQXj3fdtX_6n5KYg_AIETSr7YwYKAyXSCYQp7BbTE7Gn9zH8IHk9PwLyIOVJk5zw/s1600/unduhan.gif);
    background-repeat:no-repeat;
    background-origin:border-box;
    background-position:50% 50%;
    
    border-width:50px;
    border-color:rgba(0,0,0,0);
    
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -ms-transition:0.5s ease;
    -o-transition:0.5s ease;
    transition:0.5s ease;
}

a:hover {
    border-width:0;
    border-color:rgba(0,0,0,0.5);
}

a.one {border-style:solid;}
a.two {border-style:dashed;}
a.san {border-style:dotted;}


a.yon       {border:50px solid  rgba(0,0,0,0.7);}
a.goo       {border:50px dashed rgba(0,0,0,0.7);}
a.rok       {border:50px dotted rgba(0,0,0,0.7);}
a.ryk       {border:50px double rgba(0,0,0,0.7);}
a.yon:hover {border: 1px solid  rgba(0,0,0,0.7);}
a.goo:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.rok:hover {border: 1px dotted rgba(0,0,0,0.7);}
a.ryk:hover {border: 1px double rgba(0,0,0,0.7);}


a.x7,
a.x8,
a.x9 {
    -webkit-border-radius:0;
-moz-border-radius:0;
    border-radius:0;
}
a.x7       {border:50px solid  rgba(0,0,0,0.7);}
a.x8       {border:50px dashed rgba(0,0,0,0.7);}
a.x9       {border:50px dotted rgba(0,0,0,0.7);}
a.x7:hover {border: 1px solid  rgba(0,0,0,0.7);}
a.x8:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.x9:hover {border: 1px dotted rgba(0,0,0,0.7);}

<a class="one" href="#"></a>
<a class="two" href="#"></a>
<a class="san" href="#"></a>
<br>
<a class="yon" href="#"></a>
<a class="goo" href="#"></a>
<a class="rok" href="#"></a>
<a class="ryk" href="#"></a>
<br>
<a class="x7" href="#"></a>
<a class="x8" href="#"></a>
<a class="x9" href="#"></a>