JSFiddle - React, Tailwind, and code Playground

by borglinm

HTML

<a href="#" class="rounded-orange-button">Edit Without Logo class</a>
<br />
<a href="#" class="rounded-orange-button logo-edit">Edit must be orange With the logo</a>

CSS

.rounded-orange-button {
text-align: center;
color: #FFFFFF;
display: inline-block;
border-radius: 2px;
line-height: 27px;
width: 200px;
position: relative;
background: #FF9100;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF9100) to(#FA6800));
background: -webkit-linear-gradient(top, #FF9100, #FA6800);
background: -moz-linear-gradient(top, #FF9100, #FA6800);
background: -o-linear-gradient(top, #FF9100, #FA6800);
background: linear-gradient(to bottom, #FF9100, #FA6800);
-pie-background: linear-gradient(to bottom, #FF9100, #FA6800);
}

.logo-edit{
    background-image: url('http://www.w3schools.com/cssref/smiley.gif'), linear-gradient(to bottom, #FF9100, #FA6800);
    background-repeat:no-repeat;
}