JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<a href="#"><p class="button"><span>BUY NOW</span></p></a>
</body>

CSS

body {
  background-color: #264D38;
 }

.button {
	display: inline-block;
	width: 150px;
  position: relative;
  height: 70px;
  line-height: 50px;
}

p.button:before { 
  content: "";
  background-color: #898989;
	opacity: 0.4;
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  border-radius: 2px;
  filter: alpha(opacity=40); /* Para IE8 e anteriores */
}

p.button > span {
	padding: 10px;
	color: #ffffff;
	font-weight: bold;
  position: absolute; left: 0; top: 0; bottom: 0; right: 0;
  text-align: center;
  opacity: 1
}

.button:hover {
	background-color: #000000;
}