A Pen by Chris.

index.html

<div class="container">
  
  <h1>Just Some More Hover Effects</h1>

  <a class="one" href="#"></a>
  <a class="two" href="#"></a>
  <a class="three" href="#"></a>
  <br>
  <a class="four" href="#"></a>
  <a class="five" href="#"></a>
  <a class="six" href="#"></a>
  <a class="seven" href="#"></a>
  <a class="eight" href="#"></a>
  <a class="nine" href="#"></a>
  <a class="ten" href="#"></a>
  
</div>

Just-some-more-hover-effects.markdown

Just some more hover effects

A Pen by Chris on CodePen.

License.

style.css

html,body {background: #ccc; color: #fff; font-family: arial;}
.container{ margin: 0 auto; width: 800px; }

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(http://d1r5i20o8cadcu.cloudfront.net/designs/images/125363/original/creattica_miamond_mark_large-01.png);
    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.three {border-style:dotted;}


a.four       {border:50px solid  rgba(0,0,0,0.7);}
a.four:hover {border: 1px solid  rgba(0,0,0,0.7);}

a.five       {border:50px dashed rgba(0,0,0,0.7);}
a.five:hover {border: 1px dashed rgba(0,0,0,0.7);}

a.six       {border:50px dotted rgba(0,0,0,0.7);}
a.six:hover {border: 1px dotted rgba(0,0,0,0.7);}

a.seven       {border:50px double rgba(0,0,0,0.7);}
a.seven:hover {border: 1px double rgba(0,0,0,0.7);}


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