<div class="header">
  <h1><strong>SVG</strong> hotspot/play button</h1>
  <p>Prototype made with TimelineMax</p>
</div>

<div class="play-button">
    <div class="circle">
        <div class="icon"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/play.svg" alt="" class="svg-inject"></div>
        <div class="black"><svg height="62" width="62"><circle cx="31" cy="31" r="8" fill="transparent" stroke="#171521" stroke-width="2" /></svg></div>
        <div class="yellow"><svg height="48" width="48"><circle cx="24" cy="24" r="24" fill="#f3d178" /></svg></div>
        <div class="border"><svg height="72" width="72"><circle cx="36" cy="36" r="36" fill="transparent" stroke="#f3d178" stroke-width="1" stroke-dasharray="4,3" /></svg></div>
        <div class="white"><svg height="120" width="120"><circle cx="60" cy="60" r="33" fill="#fff" /></svg></div>
        <div class="lines"></div>
    </div>

    <div class="text">Hover me</div>
</div>
@import "compass";

@function rem($px, $base: 16px) {
    @return ($px / $base) * 1rem;
}

@function em($px, $base: 16px) {
    @return ($px / $base) * 1em;
}

@mixin setInCenter($width, $height) {
  position: absolute;
  top: 50%;
  left: 50%;

  width: $width;
  height: $height;

  margin-top: -($height/2);
  margin-left: -($width/2);
  
  @content;
}

body {
  background: #2c283f;
  
  font-family: Montserrat, sans-serif;
  color: #fff;
}

.header {
  position: absolute;
  top: 50%;
  
  width: 100%;
  margin-top: -130px;
  
  text-align: center;
  
  h1 {
    font-size: 31px;
    font-family: Montserrat, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    pointer-events: none;
    letter-spacing: 1px;
  }

  h1 strong {
    font-weight: 700;
    color: #f3d178;
  }

  p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 16px;
    font-weight: normal;
    margin-top: 10px;
    letter-spacing: 1px;
  }
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;

    width: rem(100px);
    height: rem(80px);
    margin-top: rem(0px);
    margin-left: rem(-50px);

    font-size: rem(16px);

    cursor: pointer;

    > .circle {
        position: relative;

        width: em(34px);
        height: em(34px);
        margin: auto;
    }

    > .circle > .icon {
        position: absolute;
        z-index: 5;
        @include setInCenter(em(12px), em(14px));
        display: none;
        margin-left: -0.29em;
    }

    > .circle > .black {
        z-index: 4;
        @include setInCenter(62px, 62px);

        opacity: 0.9;
    }

    > .circle > .yellow {
        position: absolute;
        z-index: 3;
        @include setInCenter(48px, 48px);
    }

    > .circle > .border {
        position: absolute;
        z-index: 2;
        @include setInCenter(72px, 72px);
    }

    > .circle > .white {
        position: absolute;
        z-index: 2;
        @include setInCenter(120px, 120px);
        
        opacity: 0.1;
    }

    > .circle > .lines {
        position: absolute;

        display: none;
    }

    > .text {
        position: relative;

        margin-top: em(38px);

        font-size: em(12px);
        color: #fff;
        text-transform: uppercase;
        text-align: center;
    }
}
View Compiled
var self = this;

var $playBtn = $('.play-button');
TweenMax.set($playBtn.find('circle'), { transformOrigin: "center center" });

self.pulseTl = new TimelineMax({ yoyo: true, repeat: -1 });
self.pulseTl.fromTo($playBtn.find('.white'), 2, { scale: 1 }, { scale: 1.2, ease: Power2.easeInOut });

self.spinTl = new TimelineMax({ repeat: -1 });
self.spinTl.to($playBtn.find('.border'), 5, { rotation: 360, ease: Linear.easeNone });

var onReverse = function() {
  var self = this;
  self.pulseTl.resume();
  self.spinTl.pause();
};

self.hoverTl = new TimelineMax({ paused: true, onReverseComplete: onReverse, onReverseCompleteScope: self });
self.hoverTl.to($playBtn.find('.black circle'), .25, { scale: 0, ease: Circ.easeIn }, "start")
.to($playBtn.find('.yellow circle'), .45, { scale: 0, ease: Circ.easeIn }, "start")
.set($playBtn.find('.black circle'), { fill: '#171521' })
.set($playBtn.find('.icon'), { display: 'block' })
.to($playBtn.find('.black circle'), .20, { scale: 3.4, ease: Circ.easeOut }, "end")
.from($playBtn.find('.border circle'), .35, { scale: 0, ease: Circ.easeOut }, "end")
.to($playBtn.find('.white circle'), .45, { scale: 1.4, ease: Back.easeOut }, "end")
.to($playBtn.find('.text'), .55, { y: 15, ease: Back.easeOut }, "end");
self.hoverTl.timeScale(1.1);

$playBtn.on('click', function() {
  $el = $(this);
})

.on('mouseenter', function() {
  $el = $(this);
  
  self.pulseTl.pause();
  self.hoverTl.play();
  self.spinTl.play();
})

.on('mouseleave', function() {
  $el = $(this);
  
  self.hoverTl.reverse();
});
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat:400,700
  2. https://fonts.googleapis.com/css?family=Playfair+Display:400italic

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js