JSFiddle - React, Tailwind, and code Playground

by diaryfakta

HTML

<div class='tombol_mengkilat'><a href='#'>Download Disini</a></div>

CSS

body{
margin:50px;
}
.tombol_mengkilat{
font-family:Arial Black;
font-size:25px;
background-image: linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -o-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -moz-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -webkit-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -ms-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
width:250px;
height:auto;
padding:5px;
text-align:center;
border-radius:5px;
border:solid 2px #ddd;
}
.tombol_mengkilat a{
color:#fff;
text-decoration:none;
}
.tombol_mengkilat:hover{
box-shadow:0 1px 5px #000;
background-image: linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -o-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -moz-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -webkit-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -ms-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
}
.tombol_mengkilat:active{
background:rgb(211,7,29);
border:solid 1px #888;
text-shadow:1px 1px 1px #000;
box-shadow:inset 0 0 5px #000;
position:relative;
top:2px;
}