JSFiddle - React, Tailwind, and code Playground

HTML

<input value="Download" type="button" onclick="this.disabled=true; this.value='Starting..';location.href='#'">

CSS

input[type="button"] {
  margin: 10px 5px 10px 5px;
  -webkit-appearance: button;
  cursor: pointer;
  font-family: Aktiv-Grotesk, Verdana, Geneva, sans-serif;
  font-weight: normal;
  font-size: 13px;
  padding: 9px 15px;
  text-transform: uppercase;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  box-shadow: none;
  cursor: pointer;
  border: 2px solid #ff2e54;
  ;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  color: #ff2e54;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: #fff;
  transition: 0.3s;
}

input[type="button"]:hover {
  background: rgba(255, 45, 84, 1);
  border: 2px solid rgba(255, 255, 255, 0);
  color: #fff;
  -webkit-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -moz-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -o-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
}

html input[type="button"]:active {
  border: 2px solid #ff607f;
  background: #ff607f!important;
  color: #eee;
  -webkit-box-shadow: 0px 1px 1px 0px #c12140;
  -moz-box-shadow: 0px 1px 1px 0px #c12140;
  -o-box-shadow: 0px 1px 1px 0px #c12140;
  box-shadow: 0px 1px 1px 0px #c12140;
}

html input[type="button"]:disabled,
.form-submit input[type="submit"]:disabled {
  -webkit-transition: all .2s ease-in-out 2s;
  -moz-transition: all .2s ease-in-out 2s;
  -o-transition: all .2s ease-in-out 2s;
  transition: all .2s ease-in-out 2s;
  cursor: default;
  background-color: #fff;
  border: 2px solid #E1E1E1;
  color: #BBB;
  box-shadow: none;
}