JSFiddle - React, Tailwind, and code Playground

by Barbos

HTML

<a href="https://jsfiddle.net/Barbos/5qb8r3Lg/" 		
    class="svg-startconv button--link" 
		data-xf-init="tooltip" 
		title="{{ phrase('start_new_conversation') }}"
		data-xf-click="overlay">
		{$buttonName}
    
</a>

CSS

.svg-startconv.button--link {
  display: block;
  padding: 3px 0;
  margin: 0 auto 5px;
}
.svg-startconv.button--link .button-text {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}
.svg-startconv.button--link .button-text i {
  margin: 0 3px 0 0;
}
@media (max-width: ) {
  .svg-startconv.button--link {
    display: inline-block;
    width: 120px;
  }
}
.svg-startconv.button--link:hover i {
  animation: wrench 2.5s ease infinite;
}
@keyframes wrench {
  0% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }
  8% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }
  10% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
  18% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  20% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  28% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
  30% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
  38% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  40% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  48% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
  50% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
  58% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  60% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  68% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
  75%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}