Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
​
​
​
    <div>
      <a href="#skills" id="top-left-circle" class="panel" aria-label="Hello">
        <span class="char1" aria-hidden="true">H</span>
        <span class="char2" aria-hidden="true">H</span>
        <span class="char3" aria-hidden="true">H</span>
        <span class="char4" aria-hidden="true">H</span>
        <span class="char5" aria-hidden="true">H</span>
      </a>
    </div>
​
​
  </body>
</html>
 
body{margin: 0;}
​
a#top-left-circle{
  transition: all .2s ease-in-out;
  display:block;
  box-sizing: border-box;
  color: #FFF;
  width: 90px;
  height: 90px;
  background: #006699;
  border-radius: 0 0 90px 0;
  -webkit-border-radius: 0 0 90px 0;
  border: 2px dashed #fff;
  box-shadow: -1px -1px 3px 5px rgba(0, 102, 153, 0.7), 2px 2px 6px 4px rgba(10, 10, 0, 0.5);
  
  transform: translateZ(0); /* YADADAAAAAA */
}
a#top-left-circle:hover{
  transform: scale(1.1);
}
a#top-left-circle span {
  font: 14px Monaco, MonoSpace;
  height: inherit;
  position: absolute;
  left: -5px;
  top: 0;
  transform-origin: center;
}
a#top-left-circle .char1 { transform: rotate(-15deg); }
a#top-left-circle .char2 { transform: rotate(-30deg); }
a#top-left-circle .char3 { transform: rotate(-45deg); }
a#top-left-circle .char4 { transform: rotate(-60deg); }
a#top-left-circle .char5 { transform: rotate(-75deg); }
Output

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

Dismiss x
public
Bin info
roXonpro
0viewers