JSFiddle - React, Tailwind, and code Playground

by diaryfakta

HTML

<div class='tombol'>
Download Themes
</div>

CSS

body{
background-image: linear-gradient(bottom, rgb(162,34,25) 44%, rgb(195,62,53) 72%);
background-image: -o-linear-gradient(bottom, rgb(162,34,25) 44%, rgb(195,62,53) 72%);
background-image: -moz-linear-gradient(bottom, rgb(162,34,25) 44%, rgb(195,62,53) 72%);
background-image: -webkit-linear-gradient(bottom, rgb(162,34,25) 44%, rgb(195,62,53) 72%);
background-image: -ms-linear-gradient(bottom, rgb(162,34,25) 44%, rgb(195,62,53) 72%);
margin:50px;
}
.tombol{
background-image: linear-gradient(bottom, rgb(162,34,25) 44%, rgb(195,62,53) 72%);
background-image: -o-linear-gradient(bottom, rgb(162,34,25) 44%, rgb(195,62,53) 72%);
background-image: -moz-linear-gradient(bottom, rgb(162,34,25) 44%, rgb(195,62,53) 72%);
background-image: -webkit-linear-gradient(bottom, rgb(162,34,25) 44%, rgb(195,62,53) 72%);
background-image: -ms-linear-gradient(bottom, rgb(162,34,25) 44%, rgb(195,62,53) 72%);
padding:5px;
border:solid 1px #420300;
width:25%;
text-align:center;
margin:0 auto;
font-family:Arial;
font-size:20px;
font-weight:bold;
text-shadow:1px 1px 1px #000;
color:#fff;
cursor:pointer;
border-radius:5px;
}
.tombol:hover{
background-image: linear-gradient(bottom, rgb(162,34,25) 0%, rgb(195,62,53) 100%);
background-image: -o-linear-gradient(bottom, rgb(162,34,25) 0%, rgb(195,62,53) 100%);
background-image: -moz-linear-gradient(bottom, rgb(162,34,25) 0%, rgb(195,62,53) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(162,34,25) 0%, rgb(195,62,53) 100%);
background-image: -ms-linear-gradient(bottom, rgb(162,34,25) 0%, rgb(195,62,53) 100%);
border:solid 1px #b34a44;
box-shadow:0 0 3px #420300;
}
.tombol:active{
color:#ddd;
background:#7d0600;
box-shadow:inset 0 1px 1px #000;
position:relative;
top:2px;
}
.tombol:before{
content:'>';
}
.tombol:after{
content:'<';
}