JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<a href="#" data-link="#" id="kiraBtn"><svg id="arrowIcon" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 57 56.9"> <g id="arrow">  <path id="outline" class="st0" d="M43.5,13.4c-.7-.7-1.6-1.1-2.6-1.1s-.2,0-.3,0c-.3,0-.7.1-1,.2L5.3,26.2c-1.3.5-2.2,1.7-2.3,3.2-.1,1.4.6,2.7,1.8,3.5l7.3,4.3-9.4,9.4c-1.8,1.8-1.8,4.7,0,6.4l1.2,1.2c.9.9,2,1.3,3.2,1.3s2.4-.5,3.2-1.3l9.4-9.4,4.4,7.4c.7,1.1,1.9,1.8,3.2,1.8s.2,0,.3,0c1.4-.1,2.6-1,3.2-2.3l13.6-34.2c.6-1.4.2-2.9-.8-4ZM20.4,39.8c0,0-.1,0-.2,0-.4,0-.9.2-1.2.5l-11.3,11.3c-.3.3-.9.3-1.2,0l-1.2-1.2c-.3-.3-.3-.9,0-1.2l11.3-11.3c.4-.4.5-.9.5-1.4,0-.5-.4-1-.8-1.2l-9.6-5.6,34.2-13.6-13.6,34.2-5.7-9.6c-.3-.5-.7-.8-1.2-.8Z"></path> </g> <g id="lines"> <path class="st0" d="M37.3,1.4v6.7c0,.8.6,1.4,1.4,1.4s1.4-.6,1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4s-1.4.6-1.4,1.4Z"></path> <path class="st0" d="M48.9,16.9c-.8,0-1.4.6-1.4,1.4s.6,1.4,1.4,1.4h6.7c.8,0,1.4-.6,1.4-1.4s-.6-1.4-1.4-1.4h-6.7Z"></path> <path class="st0" d="M45.4,9.7c-.6.6-.6,1.4,0,2s1.4.6,2,0l4.7-4.7c.6-.6.6-1.4,0-2s-1.4-.6-2,0l-4.7,4.7Z"></path> <path class="st0" d="M47.3,24.9c-.6-.6-1.4-.6-2,0s-.6,1.4,0,2l4.7,4.7c.6.6,1.4.6,2,0s.6-1.4,0-2l-4.7-4.7Z"></path> <path class="st0" d="M27.4,4.9c-.6-.6-1.4-.6-2,0s-.6,1.4,0,2l4.7,4.7c.6.6,1.4.6,2,0s.6-1.4,0-2l-4.7-4.7Z"></path> </g> </svg>Click <span style="color: #002f3c;">Here</span> to launch Kira</a>

CSS

#kiraBtn {
    display: inline-block;
    background: #00c65e;
    color: #fff;
    padding: 6px 10px 5px 10px;
    font-weight: 600;
    text-decoration: none;
    font-size: 22px;
    border-radius: 6px;
}

#arrowIcon {
    display: inline-block;
    width: 25px;
    margin-right: 8px;
    margin-top: -10px;
}

#center, #outline, #lines {
    fill: #fff;
}

#kiraBtn:hover  #lines{
  animation: .6s fadeIn;
}
@keyframes fadeIn {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}