JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;link href=&#39;https://fonts.googleapis.com/css?family=Lobster&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css&quot;&gt;"></script>
<script src="&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js&quot;&gt;&lt;/script&gt;"></script>
<script src="&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js&quot;&gt;"></script>
<a href='#'>
  <div id='buttondiv'>
  <div id='triangle2'></div>
  <div id='triangle'></div>
  <h1>Click</h1>
  </div>
</a>

CSS

/*body {
  background-color:gray;
}*/

#buttondiv {
  background: blue;
  text-align:center;
  padding:0px;
  color:white;
  width:200px;
  height:70px;
  font-size:25px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-45px;
  margin-left:-100px;
  border:none;
  font-family: 'Lobster', cursive;
    transition: 2s;
}

#triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 0 35px 50px;
  border-color: transparent transparent transparent white;
  position:absolute;
 opacity:0;
}

h1 {
  color:white;
  position:relative;
  text-align:center;
  bottom:28px;
  text-shadow:0px 0px 5px red;
}

#triangle2 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 0 35px 50px;
  border-color: transparent transparent transparent blue;
  position:absolute;
  left:200px;
   opacity:0;
}

JavaScript

$(document).ready(function(){
  $('#buttondiv').click(function(){
   if($(this).find('#triangle').css('opacity') == 0)  {
      $('#triangle,#triangle2').animate({'opacity': 1},1000);
   }else{
        $('#triangle,#triangle2').animate({'opacity': 0},1000);
   }
  });
});