JSFiddle - React, Tailwind, and code Playground

HTML

<input id="avdhootround" type="submit" value="Click" />

CSS

input#avdhootround{
width:100px; /*same as the height*/
height:100px; /*same as the width*/
background-color:#ff0000;
border:1px solid #ff0000; /*same colour as the background*/
color:#fff;
font-size:1.6em;
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#avdhootround:hover{
background:#c20b0b;
border:1px solid #c20b0b;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}