JSFiddle - React, Tailwind, and code Playground

HTML

<span class="a">Button 01</span>
 <span class="b">Button 02</span>
 <span class="c">Button 03</span>
 <span class="d">Button 04</span><br/>
<input class="a" type="button" value="Button 01"></input>
<input class="b" type="button" value="Button 02"></input>
<input class="c" type="button" value="Button 03"></input>
<input class="d" type="button" value="Button 04"></input><br/>
 <span class="a">Button 01</span>
 <span class="b">Button 02</span>
 <span class="c">Button 03</span>
 <span class="d">Button 04</span><br/>
<input class="a" type="button" value="Button 01"></input>
<input class="b" type="button" value="Button 02"></input>
<input class="c" type="button" value="Button 03"></input>
<input class="d" type="button" value="Button 04"></input>

CSS

span                     {width:120px; display:inline-block; text-align:center}
span, input[type=button] {font:normal 17px consolas; border:1px solid grey; margin:3px 1px; padding:8px; cursor:pointer; border-radius:2px}
input[type=button]       {width:138px}

.a         {background: #ff6f82}
.b         {background: lightgreen}
.c         {background: lightblue}

.d         {display:none}

.a, .b, .c {transition: background-color 0.5s}

.a:hover,
.b:hover,
.c:hover    {background: #f2f6f8; /* Old browsers */
background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* IE10+ */
background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */}