.inked {
  position: relative;
  overflow: hidden; }
  .inked.ink-super-light > .ink {
    background: rgba(255, 255, 255, 0.8); }
  .inked.ink-light > .ink {
    background: rgba(255, 255, 255, 0.2); }
  .inked.ink-dark > .ink {
    background: rgba(0, 0, 0, 0.2); }

.ink {
  display: block;
  position: absolute;
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0); }

/*animation effect*/
.ink.animate {
  -webkit-animation: ripple 0.65s linear;
  animation: ripple 0.65s linear; }

@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    transform: scale(2.5); } }

@keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    transform: scale(2.5); } }