JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<button>
    <span>Submit</span>
    Submit
</button>

CSS

/* demo styles */
button{padding:15px;border:none;margin:10px;cursor:pointer;color:#fff;}



button{
      position:relative;
    
      background-color: #999999;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#555555)); /* Saf4+, Chrome */
      background-image: -webkit-linear-gradient(top, #999999, #555555); /* Chrome 10+, Saf5.1+, iOS 5+ */
      background-image:    -moz-linear-gradient(top, #999999, #555555); /* FF3.6 */
      background-image:     -ms-linear-gradient(top, #999999, #555555); /* IE10 */
      background-image:      -o-linear-gradient(top, #999999, #555555); /* Opera 11.10+ */
      background-image:         linear-gradient(top, #999999, #555555);
}
button span{
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    line-height: 46px;
    vertical-align: middle;
    
    background-color: #555555;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#111111));
    background-image: -webkit-linear-gradient(top, #555555, #111111);
    background-image:    -moz-linear-gradient(top, #555555, #111111); 
    background-image:     -ms-linear-gradient(top, #555555, #111111); 
    background-image:      -o-linear-gradient(top, #555555, #111111);
    background-image:         linear-gradient(top, #555555, #111111);
    
    -webkit-transition: opacity 0.3s ease-in-out;  /* Saf3.2+, Chrome */
     -moz-transition: opacity 0.3s ease-in-out;  /* FF4+ */
      -ms-transition: opacity 0.3s ease-in-out;  /* IE10? */
       -o-transition: opacity 0.3s ease-in-out;  /* Opera 10.5+ */
          transition: opacity 0.3s ease-in-out;
}

button span{opacity:0;}
button:hover span{opacity:1;}