JSFiddle - React, Tailwind, and code Playground

by Arif Hasan

HTML

<button class="button" onclick="submit();" type="button">Text button <span></span></button>

CSS

.button{
			    color: #FFFFFF;
			    font-family:Arial;
			    font-size: 10px;
			    font-weight: normal;
			    padding: 0;
			    padding-left: 20px;
			    height: 36px;
			    width: 120px;
			    margin:4px auto auto;
			    text-align: left;
			    cursor:pointer; 
			    border:0px;
			    background: #3ba93d;
			    background-position: 66px 4px;
			    background-repeat:no-repeat;
			    background: #3ba93d; /* fallback */
			    background: -webkit-gradient(linear, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */
			    background: -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */
			    background: -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */
			    background: -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */
			    background: -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */
			    background: linear-gradient(top, #3ba93d, #27842a); /* W3C */
			    }
			  .button span {
			  	position: absolute;
			  	top: 17px;
			  	left: 100px;
			  	width: 20px;
			  	height: 24px;
			  	background: url(https://png.pngtree.com/element_our/png/20181205/forbidden-vector-icon-png_256703.jpg);
			  }