JSFiddle - React, Tailwind, and code Playground
by brightonmike
HTML
<div class="drop"><a href="#" class="coloured border-radius">Button</a>
See!
</div>
CSS
body {background:url(http://backgrounds.picaboo.com/download/4f/f6/4f64654ced054628a8558a1af9d5b18c/black_paint_texture.jpg);}
.coloured {
display:block;
padding:7px;
float:left;
text-align:center;
-moz-transition:all 0.1s linear;
-webkit-transition:all 0.1s linear;
transition:all 0.1s linear;
font-family:Helevetica, Arial, sans-serif;
width:118px;
-webkit-box-shadow: inset -10px 10px 40px 5px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(255,255,255,0.2);
-moz-box-shadow: inset -10px 10px 40px 5px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(255,255,255,0.2);
box-shadow: inset -10px 10px 40px 5px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(255,255,255,0.2);
color:#d0d0d0;
background:#F8B70B;
font-weight:bold;
text-decoration:none;
font-size:14px;
}
.coloured:hover {
-webkit-box-shadow: inset 0px 10px 40px 5px rgba(0, 0, 0, 0.3), 0px 0px 0px 3px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 10px 40px 5px rgba(0, 0, 0, 0.3), 0px 0px 0px 3px rgba(255,255,255,0.2);
box-shadow: inset 0px 10px 40px 5px rgba(0, 0, 0, 0.3), 0px 0px 0px 3px rgba(255,255,255,0.2);
color:#fff;
padding:7px!important;
}
.border-radius {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.red {background:#8d1f1f}
.blue {background:#0688ed}
.green {background:#54b017}
.white {background:#f0f0f0;color:#333}
.white:hover {color:#000;}
.drop {width:131px;display:block;background:#fff; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; margin-top:10px;
margin:10px;float:left;position:absolute;z-index:-999;padding-bottom:-20px;height:1px;font-size:0px;}
.drop:hover...