JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans"></script>
<div id="square" class="clickable"><a href="#">&nbsp;Raise Ticket</a>

</div>

CSS

div.clickable {
    position: relative;
}
#square {
    /*display:block;*/
    background: #00a300;
    width: 125px;
    height: 125px;
    text-align: left;
    vertical-align: top;
    font-family:'Open Sans', sans-serif;
    font-size: 15pt;
    color: white;
    /* border-radius: 2px; */
    letter-spacing: 0.01em;
    line-height: 22pt;
    font-weight: 200;
    margin: 3px;
    /* cursor: pointer;*/
}
#square:hover {
    outline: 3px #3a3a3a solid;
}
#square:active {
    outline: 3px #3a3a3a solid;
    top: 1px;
    left: 1px;
}
div.clickable a {
    position:absolute;
    width: 100%;
    height:100%;
    text-decoration: none;
    color:white;
    top:0;
    left:0;
}

JavaScript

WebFontConfig = {
      google: {
          families: ['Open+Sans::latin']
      }
  };
  (function () {
      var wf = document.createElement('script');
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wf, s);
  })();