JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="record-block">
  <a href="#" class="recording">Запись на примерку
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 222 38" style="enable-background:new 0 0 222 38;" xml:space="preserve">

<filter id="violet-fill" x="0%" y="0%">
<feFlood flood-color="#000"/>
<feOffset dx="8.2112">
<animate id="anim" attributeName="dx" values="0;10;0" dur="3s" begin="path1.mouseover" restart="whenNotActive" fill="freeze"/>
</feOffset>
<feComposite operator="in" in2="SourceGraphic"/>
<feComposite operator="over" in2="SourceGraphic"/>
</filter>
<g id="ink">
<g>
<g>
<path id="path1" class="st0"...

CSS

.st0 {
  fill: #bd2486;
  filter: url(#violet-fill);
}
.st1 {
  stroke: #000000;
  stroke-miterlimit: 10;
}
.st2 {
  fill: #E6E6E6;
}