JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">test test</div>

CSS

body
{
    background-color: #1A3068;
}

.button
{
    
    width:20%;
    height:10%;
    background-image: linear-gradient(bottom, rgb(145,189,214) 0%, rgb(255,255,255) 100%);
    background-image: -o-linear-gradient(bottom, rgb(145,189,214) 0%, rgb(255,255,255) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(145,189,214) 0%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(145,189,214) 0%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(145,189,214) 0%, rgb(255,255,255) 100%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(145,189,214)),
        color-stop(1, rgb(255,255,255))
    );
    
    box-shadow: 0px 0px 0px 5px white, 0px 0px 10px 5px black;
    -o-box-shadow: 0px 0px 0px 5px white, 0px 0px 10px 5px black;
    -ms-box-shadow: 0px 0px 0px 5px white, 0px 0px 10px 5px black;
    -moz-box-shadow: 0px 0px 0px 5px white, 0px 0px 10px 5px black;
    -webkit-box-shadow: 0px 0px 0px 5px white, 0px 0px 10px 5px black;
    
    border-radius: 15px;
    -o-border-radius: 15px;
    -ms-border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    
    border: solid 5px rgb(145,189,214);
    
    
    
    margin: 7px; /* to complement the outside shadow */
}