JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<button class="knockout-top-to-bottom">Test</button>

CSS

.knockout-top-to-bottom {
  position: relative; 
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5e5047+0,c4c4c4+64,c4c4c4+100 */
background: #5e5047; /* Old browsers */
background: -moz-linear-gradient(top,  #5e5047 0%, #c4c4c4 64%, #c4c4c4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e5047), color-stop(64%,#c4c4c4), color-stop(100%,#c4c4c4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #5e5047 0%,#c4c4c4 64%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #5e5047 0%,#c4c4c4 64%,#c4c4c4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #5e5047 0%,#c4c4c4 64%,#c4c4c4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #5e5047 0%,#c4c4c4 64%,#c4c4c4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5047', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */



}
.knockout-top-to-bottom:before, .knockout-top-to-bottom:after {
  content: "";
  position: absolute;
    border-radius: 5px;
}
.knockout-top-to-bottom:before {
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#f1f1f1));
  
  z-index: -2;
}
.knockout-top-to-bottom:after {
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #a4b9ff;
}