Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Bin</title>
</head>
<body>
  <!-- from http://jsdo.it/ksk1015/cLLl -->
  <a class="one" href="#"><span>Hi !</span></a>
</body>
</html>
 
a {
    display:block;
    color:white;
    text-decoration:none;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
    width:100px;
    height:100px;
    text-align:center;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    
    border-width:50px;
    border-color:rgba(0,0,0,1);
    
    -webkit-transition:0.2s ease;
    -moz-transition:0.2s ease;
    -ms-transition:0.2s ease;
    -o-transition:0.2s ease;
    transition:0.2s ease;
  position: relative;
}
a:hover {
    border-width:0;
    border-color:rgba(0,0,0,0.5);
    
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -ms-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    transition-duration:0.5s;
}
a.one {border-style:solid;}
a span { position: absolute; left: -9px; top: -15px }
 
/* your JavaScript here - remember you can override this default template using 'Save'->'As Template' */
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers