JSFiddle - React, Tailwind, and code Playground

by Ngoc Hieu

HTML

<a href="#" id="so1" ></a>
<a href="#" id="so2" ></a>
<a href="#" id="so3" ></a>

CSS

a{
    background:url('http://2.bp.blogspot.com/--LuK5VmWRbA/Us10u3dgvEI/AAAAAAAAADQ/he_utE7FDtg/s1600/css3_logo_wide.png') 50% 50% no-repeat;
    background-size:100%;
    -webkit-background-size:100%;
    -moz-background-size:100%;
    background-origin:border-box;
    display:block;
    float:left;
    width:150px;
    height:150px;
    margin:10px;
    border-width:50px;
    border-color: rgba(0,0,0,0);
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
}
a:hover{
    border-width:0;
    border-color:rgba(0,0,0,0.5);
}

#so1{
    border:75px solid rgba(0,0,0,0.5);
}
#so1:hover{
    border:1px solid rgba(0,0,0,0.7);
}
#so2{
    border:75px dotted rgba(0,0,0,0.5);
}
#so2:hover{
    border:1px dotted rgba(0,0,0,0.7);
}
#so3{
    border:75px dashed rgba(0,0,0,0.5);
}
#so3:hover{
    border:1px dashed rgba(0,0,0,0.7);
}