@-webkit-keyframes sonar-base {
  from {
    padding: 0;
    opacity: 0.5;
  }
  to {
    padding: 1.3em;
    opacity: 0;
    top: -1.3em;
    left: -1.3em;
  }
}
@-moz-keyframes sonar-base {
  from {
    padding: 0;
    opacity: 0.5;
  }
  to {
    padding: 1.3em;
    opacity: 0;
    top: -1.3em;
    left: -1.3em;
  }
}
@-o-keyframes sonar-base {
  from {
    padding: 0;
    opacity: 0.5;
  }
  to {
    padding: 1.3em;
    opacity: 0;
    top: -1.3em;
    left: -1.3em;
  }
}
@keyframes sonar-base {
  from {
    padding: 0;
    opacity: 0.5;
  }
  to {
    padding: 1.3em;
    opacity: 0;
    top: -1.3em;
    left: -1.3em;
  }
}
@-webkit-keyframes sonar-stroke {
  from {
    border-width: 0.8em;
    margin: -0.8em;
  }
  to {
    border-width: 0.1em;
    top: -1.3em;
    left: -1.3em;
  }
}
@-moz-keyframes sonar-stroke {
  from {
    border-width: 0.4em;
    margin: -0.4em;
  }
  to {
    border-width: 0.1em;
    top: -1.3em;
    left: -1.3em;
  }
}
@-o-keyframes sonar-stroke {
  from {
    border-width: 0.4em;
    margin: -0.4em;
  }
  to {
    border-width: 0.1em;
    top: -1.3em;
    left: -1.3em;
    padding: 1.3em;		
  }
}
@keyframes sonar-stroke {
  from {
    border-width: 0.4em;
    margin: -0.4em;
  }
  to {
    border-width: 0.1em;
    top: -1.3em;
    left: -1.3em;
  }
}
.sonar {
  position: absolute;
}
.sonar:after {
  z-index: -1;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  position: absolute;
  -webkit-animation-name: sonar-base;
     -moz-animation-name: sonar-base;
       -o-animation-name: sonar-base;
          animation-name: sonar-base;
  -webkit-animation-iteration-count: 1;
     -moz-animation-iteration-count: 1;
       -o-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
.sonar.sonar-stroke:after {
  border-width: 0;
  border-color: #FFDE00;
  border-style: solid; 
  -webkit-border-radius: inherit;
          border-radius: inherit;
  -webkit-animation-name: sonar-base, sonar-stroke;
     -moz-animation-name: sonar-base, sonar-stroke;
       -o-animation-name: sonar-base, sonar-stroke;
          animation-name: sonar-base, sonar-stroke;
}
.sonar.sonar-stroke.sonar-hover:after {
  -webkit-animation-name: none;
     -moz-animation-name: none;
       -o-animation-name: none;
          animation-name: none;
}
.sonar.sonar-stroke.sonar-hover:hover:after {
  -webkit-animation-name: sonar-base, sonar-stroke;
     -moz-animation-name: sonar-base, sonar-stroke;
       -o-animation-name: sonar-base, sonar-stroke;
          animation-name: sonar-base, sonar-stroke;
}
.sonar.sonar-fill.sonar-hover:after {
  -webkit-animation-name: none;
     -moz-animation-name: none;
       -o-animation-name: none;
          animation-name: none;
}
.sonar.sonar-fill.sonar-hover:hover:after {
  -webkit-animation-name: sonar-base;
     -moz-animation-name: sonar-base;
       -o-animation-name: sonar-base;
          animation-name: sonar-base;
  -webkit-animation-duration: 0.9s;
     -moz-animation-duration: 0.9s;
       -o-animation-duration: 0.9s;
          animation-duration: 0.9s;
}