<a href='#'class='playBut'>
    
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In  -->
<svg class='playBut' version="1.1"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
   x="0px" y="0px" width="200" height="200" viewBox="0 0 600  600" enable-background=
     "new 0 0 600 600" xml:space="preserve">

<path class='triangle' id="tri" fill="none" 
      stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" 
      d="M 200 200 Q 200 150 250 175 L 425 275 Q 475 300 425 325 L 250 425 Q 200 450 200 400 L 200 200 z"/>
  
<circle class='circle' id="cir" cx="300" cy="300" r="200" fill="none"  
        stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/> 
</svg>
    
</a>

.container {background: #ddd;
  width: 100%;
  text-align: center;
  margin-top: 10vh;
}

.circle {
  stroke: #0cc;
  stroke-dasharray: 1260;
  stroke-dashoffset: 1260;
  -webkit-transition: all 0.5s ease-in-out;
  opacity: 0.3;
}

.playBut {
  /*  border: 1px solid red;*/
  display: inline-block;
  -webkit-transition: all 0.5s ease;
  background: #000;
  border-radius: 50%;
}
.playBut .triangle {
  -webkit-transition: all 0.7s ease-in-out;
  stroke-dasharray: 750;
  stroke-dashoffset: 1500;
  stroke: #fff;
  transform: translateY(0);
}
.playBut:hover .triangle {
  stroke-dashoffset: 0;
  opacity: 1;
  stroke: #0cc;
  animation: nudge 0.7s ease-in-out;
}
@keyframes nudge {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  70% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}
.playBut:hover .circle {
  stroke-dashoffset: 0;
  opacity: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.