<div class='container'>
  <a href='#' class='cta'>
    <i data-feather="check" class='icon'></i>
  </a>
</div>

<!-- References Dribbble / Twitter -->
<div class='cs-ref'>
  <a class="cs-dribbble" href="https://dribbble.com/shots/9267275-Neumorphism-UI-Interactive-Button" target="_blank">
    <div id='svgDribbble'></div>
  </a>
  <a class="cs-twitter" target="_blank" href="https://twitter.com/CosWiSe">
    <div id='svgTwitter'></div>
  </a>
</div>

$mainC: #f1f3f6;
$secC: #9dabc0;
$svgC: rgba(#929cd0, .8);

%center {
  display: flex;
  justify-content: center;
  align-items: center;
}


html {
  background: $mainC;
}

// SVGs
#dribbble {
  position: fixed;
  display: block;
  right: 70px;
  bottom: 16px;
  svg {
    display: block;
    width: 76px;
    height: 24px;
    fill: $svgC;
  }
}
#twitter {
  position: fixed;
  display: block;
  right: 25px;
  bottom: 11px;
  svg {
    width: 24px;
    height: 24px;
    fill: $svgC;
  }
}

.container {
  width: 100%;
  height: 97vh;
  // border: 1px solid black;
  @extend %center; 
}

.cta {
  @extend %center; 
  width: 66px;
  height: 66px;
  // border: 1px solid #fff;
  background: $mainC;
  border-radius: 20px;
  box-shadow: 
    inset 0 0 15px rgba(55, 84, 170,0),
    inset 0 0 20px rgba(255, 255, 255,0),
    7px 7px 15px rgba(55, 84, 170,.15),
    -7px -7px 20px rgba(255, 255, 255,1),
    inset 0px 0px 4px rgba(255, 255, 255,.2);
  .icon {
    color: $secC;
    height: 30px;
    width: 30px;
  }

  &:hover {
    box-shadow: 
      inset 7px 7px 15px rgba(55, 84, 170,.15),
      inset -7px -7px 20px rgba(255, 255, 255,1),
      0px 0px 4px rgba(255, 255, 255,.2);
  }
  transition: box-shadow 399ms ease-in-out;
}

feather.replace();

// SVGs
$('#svgDribbble').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #dribbble');
$('#svgTwitter').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #twitter');