JSFiddle - React, Tailwind, and code Playground

by Richard O. Sandberg

HTML

<input type="submit">

CSS

input[type=submit] {
      color: white;
      background: #111;
      background-image: -webkit-linear-gradient(top, #111, #333);
      background-image: -moz-linear-gradient(top, #111, #333);
      background-image: -ms-linear-gradient(top, #111, #333);
      background-image: -o-linear-gradient(top, #111, #333);
      background-image: linear-gradient(to bottom, #111, #333);
      color: #ffffff;
      font-size: 20px;
      height:70px;
      width:1000px;
      text-decoration: none;
      font-family:SansaRegular;
      font-size:50px;
      -webkit-transition:all 5s ease-in-out;
      -moz-transition: all 5s ease-in-out;
      transition: all 5s ease-in-out;
    }

    input[type=submit]:hover{
      background: #333;
      background-image: -webkit-linear-gradient(top, #333, #111);
      background-image: -moz-linear-gradient(top, #333, #111);
      background-image: -ms-linear-gradient(top, #333, #111);
      background-image: -o-linear-gradient(top, #333, #111);
      background-image: linear-gradient(to bottom, #333, #111);
      text-decoration: none;
      color:#cccccc;
      -webkit-transition: all 5s ease-in-out;
      -moz-transition: all 5s ease-in-out;
      transition: all 5s ease-in-out;
    }