JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<section>
    <button>Upload</button>
    <button>Download</button>
</section>

CSS

* {
  -webkit-font-smoothing: antialiased;
  font-smoothing:antialiased;
   transition: all .337s ease-in-out;
    -webkit-transition: all .337s ease-in-out;
}

body {
    background:#000;
}

section {
 height: 200px;
 margin: 40px auto;
 padding: 20px 0;
 position: relative;
 width: 600px;
 text-align:center;
}

button {
    position:relative;
    border:2px solid #C54DDD;
    font:bold 20px/25px "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    letter-spacing:-2px;
    color:#D1B7DB;
    text-shadow: 0 0 1px rgba(0, 0, 0, .5), 0 1px 1px #531F7B;
    text-transform: uppercase;
    
    padding:13px 35px 10px 35px;
    margin:0px 60px;
    border-radius:100px;
    
    box-shadow: 
        inset 0 -2px 6px 3px #B348CC,
        0 -1px 1px rgba(158, 100, 166, .5),
        0 2px 3px rgba(0, 0, 0, .5),
        0 0 0 10px rgba(60, 60, 60, .2)
    ;
    
    background-color:rgb(67, 26, 76, .5);

background: -webkit-linear-gradient(left,  rgba(167,64,180,.3) 0%, rgba(124,48,161,.3) 85%, rgba(165,64,183,.3) 99%),
            -webkit-linear-gradient(left, rgba(167,64,180,0) 0%, rgba(240,240,240,0) 92%, rgba(240,240,240,.1) 99%),
            -webkit-linear-gradient(right, rgba(167,64,180,.3) 0%, rgba(124,48,161,.3) 85%, rgba(165,64,183,.3) 99%),
            -webkit-linear-gradient(right, rgba(167,64,180,0) 0%, rgba(240,240,240,0) 96%, rgba(240,240,240,.1) 99%),
            -webkit-linear-gradient(top,   rgba(167,64,180,0) 0%,rgba(124,48,161,1) 75%, rgba(197, 77, 221, .7) 95%);
}

button:before {
    position:absolute;
    bottom:-12px;
    left:15%;
    z-index:-1;
    content:'';
    height:50%;
    width:70%;
    
    background: -webkit-linear-gradient(left, rgba(44,11,64,0) 0%, rgba(44,11,64,.7) 20%, rgba(83,20,122,.5) 50%, rgba(44,11,64,.7) 80%, rgba(44,11,64,0) 100%);

}

button:after {
    position:absolute;
    top:-62.5%;
    left:-37.5%;
    z-index:-1;
    content:'...