JSFiddle - React, Tailwind, and code Playground
HTML
<div class="bannerContent">
<input class="payButton" type="submit" name="" value="">
<span class="payButtonText">
<span class="text">Заказать</span>
<span class="textShadow">Заказать</span>
</span>
</div>
CSS
.text,
.bigBanner .bannerContent {
position:relative;
}
.payButton,
.payButtonShadow,
.payButtonText,
.textShadow {
position:absolute;
}
.payButton,.payButtonText {
width:141px;
height:48px;
}
.payButton {
border:0;
background-color:transparent;
cursor:pointer;
text-decoration:none;
top:10px;
left:10px;
z-index:3;
}
.payButtonText {
background:url('http://mytavatuy.ru/1/img/payButton.png') no-repeat;
cursor:pointer;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:18px;
top:10px;
left:10px;
}
.payButtonText:active {
background:url('http://mytavatuy.ru/1/img/payButtonActive.png') no-repeat;
}
.payButtonShadow {
width:141px;
height:28px;
background:url('http://mytavatuy.ru/1/img/payButtonShadow.png') no-repeat;
bottom:68px;
right:92px;
z-index:2;
}
.text {
color:#00152e;
top:11px;
left:36px;
z-index:4;
}
.textShadow {
color:#fff;
top:12px;
left:37px;
z-index:3;
}