@mixin shadow-effect {
  &:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(255, 255, 255, .45);
  }

  &:after {
    position: absolute;
    top: 0;
    left: 0;
    clip: rect(0px, 4rem, 0, 0);
    width: 100%;
    height: 100%;
    content: '';
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fff inset;
  }

  &:hover:after {
    clip: rect(0px, 4rem, 4rem, 0);
  }

  &:active:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    transform: scale(0);
    animation: boom 500ms ease-out;
    border-radius: 50%;
    background-color: rgba(#fff, .4);
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(255, 255, 255, .45);
  }

  @keyframes boom {
    from {
      transform: scale(0);
      opacity: .5;
    }

    to {
      transform: scale(3);
      opacity: 0;
    }
  }
}

.btn {
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  transition: .3s;
  color: gray;
  border: 3px solid #373737;
  border-radius: 50%;
  background: transparent;

  @include shadow-effect;

  &:hover {
    transform: rotate(10deg);
    color: #fff;
  }
}
