Pulsating Hotspot UI Element

index.html

<section class="btn-pulse">
	<span class="ring"></span>
	<span class="circle"></span>
</section>
<!-- img by unsplash.com -->
<img src="https://ununsplash.imgix.net/photo-1416339306562-f3d12fefd36f?fit=crop&fm=jpg&h=600&q=75&w=800" alt="" />

pulsating-hotspot-ui-element.markdown

Pulsating Hotspot UI Element

Animated hotspot indicator element with pure HTML & CSS. Uses CSS3 keyframe animation.

A Pen by Matthias Ott on CodePen.

License.

style.scss

* {
  box-sizing:border-box;
}
/* Animation */
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity:0.8;
  }
  45% {
    transform: scale(1.75);
    opacity:0;
  }
}
@keyframes stop-pulsate {
  from {
    opacity:0.4;
  }
  to {
    transform: scale(2);
    opacity:0;
  }
}

/* Button */
.btn-pulse {
  position:absolute;
  top:195px;
  left:190px;
  
  .circle {
    position:absolute;
    left:50%;
    top:50%;
    width:32px;
    height:32px;
    margin: -0.666em auto auto -0.666em;
    background:rgb(223, 0, 36);
  	border-radius:50%;
    opacity:0.6;
    transform-origin: 50% 50%;
    transition:opacity .2s ease-in, transform .1s ease-out;
    color:white;
    font-size:1.5em;
    padding:0;
    text-align:center;
    line-height:32px;
    overflow:hidden;
    &:hover {
      opacity:0.8;
      cursor:pointer;
    }
    &:active {
      transform:scale(0.875);
    }
  }
  
  .ring {
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:2em;
    height:2em;
    margin:-1em auto auto -1em;
    transform-origin: 50% 50%;
    border-radius:50%;
    border:1px solid rgb(255, 0, 36);
    opacity:0;
    animation: pulsate 3s ease-out infinite;
  }
  
  &:hover .ring {
      animation: none;
    }
  
  &:active .ring {
      animation: stop-pulsate 0.3s;
    }
}