JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<a href="#" class="glass">My button</a>

CSS

.glass{
	/* background styles */
	position: relative;
	display: inline-block;
	padding: 15px 25px;
	background-color: green; /*for compatibility with older browsers*/
	background-image: linear-gradient(green,lightgreen);

	/* text styles */
	text-decoration: none;
	color: #fff;
	font-size: 25px;
	font-family: sans-serif;
	font-weight: 100;
  border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
.glass:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}
.glass:hover{
	background: linear-gradient(#700,#f00);
}