JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="btn btn-small btn-green">заказать звонок</div>
<div class="btn-alt">Call back</div>

CSS

.btn {
  display: inline-block;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  font-weight: bold;
  font-family: "PT Sans", sans-serif;
  text-align: center;
  color: white;
}
.btn:hover {
  text-decoration: none;
}
.btn-green {
  background: url("http://zverushka.zz.mu/htmlbook/buttons.png");
  color: white;
}
.btn-green:after,
.btn-green:before {
   background: url("http://zverushka.zz.mu/htmlbook/buttons.png");
}
.btn-green.btn-small {
  padding: 0 2px;
  margin: 0 17px;
  height: 40px;
  line-height: 36px;
  background-position: 0 -45px;
  background-repeat: repeat-x;
  font-size: 13px;
}
.btn-green.btn-small:before,
.btn-green.btn-small:after {
  position: absolute;
  display: block;
  content: "";
  width: 17px;
  height: 100%;
  right: 100%;
  top: 0;
  background-position: 0 0;
}
.btn-green.btn-small:after {
  left: 100%;
  background-position: 100% -90px;
}

.btn-alt {
	display: inline-block;
	padding: 5px 10px;
	position: relative;
	
	background: green;
	color: #fff;

	-webkit-border-radius: 5px;
	border-radius: 5px;
}

	.btn-alt:before {
		position: absolute;
		z-index: -1;
		left: 0;
		bottom: -5px;
		width: 100%;
		height: 100%;

		content: "";

		background: #333;
		opacity: 0.5;

		-webkit-border-radius: 10px;
		border-radius: 10px;

		background: -moz-linear-gradient(top,  rgba(51,51,51,1) 0%, rgba(51,51,51,1) 90%, rgba(51,51,51,0) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(90%,rgba(51,51,51,1)), color-stop(100%,rgba(51,51,51,0))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 90%,rgba(51,51,51,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 90%,rgba(51,51,51,0) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(51,51,51,1) 90%,rgba(51,51,51,0) 100%); /* IE10+ */
		background:...