JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:red;stroke-width:0;"/>
      </svg><br />
   <span>Test</span>
</button>

<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:green;stroke-width:0;"/>
   </svg><br />
   <span>Test Test Test</span>
</button>

<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:blue;stroke-width:0;"/>
   </svg><br />
   <span>Test Test Test Test</span>
</button>
</p>
</body>
</html>

CSS

.svgbutton {
  display: inline-block;
  border-radius: 4px;
  padding: 2px;
  width: 6em;
  box-shadow: 2px 2px 1px #efefef;
  color: black;
  border: 1px solid #dfdfdf;
  background-color: transparent;
  cursor: pointer;
  vertical-align: top;
}

.svgbutton:active {
   transform: translateY(2px);
   box-shadow: 2px 0px 1px #efefef;
}

.svgbutton span {
   cursor: pointer;
   display: inline-block;
}

.svgbutton span::after {
   content: '\00bb';
   opacity: 0;
   width: 0;
   display: inline-block;
}

.svgbutton:hover span {}

.svgbutton:hover span::after {
   opacity: 1;
   transition: 0.2s;
   width: 2ch;
}