<div class="codepen"></div>

body, html{ 
  background-image: linear-gradient(90deg,
    #1d1f20,
    #2f3031,
    #1d1f20);
  height: 100%;
}

div.codepen{
	display: block;
	position: relative;
  top:50%;
  height: 16em;
  width: 16em;
  margin: -8em auto 0;
  border-radius: 8em;
  background-color: #121212;
  cursor: pointer;
  transition: color 0.8s linear,
    background 0.8s linear,
    box-shadow 0.1s linear,
    transform 0.1s linear;
  
  &:hover{
    background-color: #DCDCDC;
  }
  
  &::before {
    content: '';
	  position: absolute;
    top: 50%;
    left: 50%;
    margin: -4.5em 0 0 -0.4em;
	  height: 0.8em;
    width: 0.8em;
	  line-height: 0.8em;
    border-radius: 0.35em;
    outline: 1px solid transparent; // anti-aliasing fix
    color: #FFF;
    background: #FFF;
	  overflow: visible;
	  transform: rotate(42.5deg) skew(-15deg,-10deg);
    filter: blur(0);
    box-shadow:
      // Top Square
      // Right Side
		  0.3em 0 0,
		  0.6em 0 0,
		  0.9em 0 0,
		  1.2em 0 0,
		  1.5em 0 0,
		  1.8em 0 0,
		  2.1em 0 0,
		  2.4em 0 0,
		  2.7em 0 0,
		  3em 0 0,
		  3.3em 0 0,
		  3.6em 0 0,
		  3.9em 0 0,
		  4.2em 0 0,
		  4.5em 0 0,
		  4.6em 0 0,
		  4.95em 0 0, // Point
		  4.95em 0.4em 0,
		  4.95em 0.6em 0,
		  4.95em 0.9em 0,
		  4.95em 1.2em 0,
		  4.95em 1.5em 0,
		  4.95em 1.8em 0,
		  4.95em 2.1em 0,
		  4.95em 2.4em 0,
		  4.95em 2.7em 0,
		  4.95em 3em 0,
		  4.95em 3.3em 0,
		  4.95em 3.6em 0,
		  4.95em 3.9em 0,
		  4.95em 4.2em 0,
		  4.95em 4.5em 0,
		  4.95em 4.8em 0,
      // Left Side
		  0 0.3em 0,
		  0 0.6em 0,
		  0 0.9em 0,
		  0 1.2em 0,
		  0 1.5em 0,
		  0 1.8em 0,
		  0 2.1em 0,
		  0 2.4em 0,
		  0 2.7em 0,
		  0 3em 0,
		  0 3.3em 0,
		  0 3.6em 0,
		  0 3.9em 0,
		  0 4.2em 0,
		  0 4.5em 0,
		  0em 4.85em 0, // Point
		  0.4em 4.9em 0,
		  0.6em 4.9em 0,
		  0.9em 4.9em 0,
		  1.2em 4.9em 0,
		  1.5em 4.9em 0,
		  1.8em 4.9em 0,
		  2.1em 4.9em 0,
		  2.4em 4.9em 0,
		  3em 4.9em 0,
		  3.3em 4.9em 0,
		  3.6em 4.9em 0,
		  3.9em 4.9em 0,
		  4.2em 4.9em 0,
		  4.5em 4.9em 0,
		  4.8em 4.9em 0,
		  4.9em 4.9em 0,
      
      // Bottom Square
      // Right Side
		  2.6em 2.5em 0,
		  2.9em 2.5em 0,
		  3.1em 2.5em 0,
		  3.4em 2.5em 0,
		  3.7em 2.5em 0,
		  4em 2.5em 0,
		  4.3em 2.5em 0,
		  4.6em 2.5em 0,
		  4.9em 2.5em 0,
		  5.1em 2.5em 0,
		  5.4em 2.5em 0,
		  5.7em 2.5em 0,
		  6em 2.5em 0,
		  6.3em 2.5em 0,
		  6.5em 2.5em 0,
		  6.8em 2.5em 0,
		  7.1em 2.56em 0,
		  7.2em 2.56em 0,
		  7.45em 2.5em 0, // Point
		  7.45em 2.8em 0,
		  7.45em 2.9em 0,
		  7.45em 3.2em 0,
		  7.45em 3.5em 0,
		  7.45em 3.8em 0,
		  7.45em 4.1em 0,
		  7.45em 4.4em 0,
		  7.45em 4.7em 0,
		  7.45em 5em 0,
		  7.45em 5.3em 0,
		  7.45em 5.6em 0,
		  7.45em 5.9em 0,
		  7.45em 6.2em 0,
		  7.45em 6.5em 0,
		  7.45em 6.8em 0,
		  7.45em 7.1em 0,
      // Left Side
		  2.6em 2.9em 0,
		  2.6em 3.2em 0,
		  2.6em 3.5em 0,
		  2.6em 3.8em 0,
		  2.6em 4.1em 0,
		  2.6em 4.4em 0,
		  2.6em 4.7em 0,
		  2.6em 5em 0,
		  2.6em 5.3em 0,
		  2.6em 5.6em 0,
		  2.6em 5.9em 0,
		  2.6em 6.2em 0,
		  2.6em 6.5em 0,
		  2.6em 6.8em 0,
		  2.6em 7em 0,
		  2.6em 7.35em 0, // Point
		  2.9em 7.35em 0,
		  3.1em 7.35em 0,
		  3.4em 7.35em 0,
		  3.7em 7.35em 0,
		  4em 7.35em 0,
		  4.3em 7.35em 0,
		  4.6em 7.35em 0,
		  4.9em 7.35em 0,
		  5.2em 7.35em 0,
		  5.5em 7.35em 0,
		  5.8em 7.35em 0,
		  6.1em 7.35em 0,
		  6.4em 7.35em 0,
		  6.7em 7.35em 0,
		  7em 7.35em 0,
		  7.3em 7.35em 0,
		  7.45em 7.35em 0;
  }
  
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 3.8em;
    left: 50%;
	  height: 3.15em;
    width: 0.8em;
    margin-left: -0.45em;
    border-radius: 0.4em;
    outline: 1px solid transparent;
    color: #FFF;
    background: #FFF;
    box-shadow: 4.45em 2.6em 0,
      -0.05em 5.4em 0,
      -4.4em 2.65em 0;
  }
  
  &:hover {
    box-shadow: 0 0 1em 0.1em rgba(0, 0, 0, 0.75);
    transform: scale(1.02);
    
    &::before,
    &::after {
      color: #000;
      background: #000;
    }
  }
}

/* Single Element Codepen.io Logo. Pure css using box-shadow and css3 transforms with just a hint of css3 filtering to help with anti-aliasing. */