JSFiddle - React, Tailwind, and code Playground
by homeblogger7
HTML
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<div class='bton-grup'>
<a href='ضع هنا رابط التوجيه' class='bton'><span><i class="fa fa-download"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton orange'><span><i class="fa fa-file-text"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton purple'><span><i class="fa fa-folder-open"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton blue'><span><i class="fa fa-paperclip"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton red'><span><i class="fa fa-link"></i></span>مثال</a>
</div>CSS
.bton-grup{width:500px;text-align:center;margin:5px auto}
.bton{display:inline-block;height:50px;line-height:50px;padding-right:20px;padding-left:70px;position:relative;background:#1abc9c;color:#fff;font-size:22px;font-family:'Yanone Kaffeesatz',sans-serif;text-transform:uppercase;letter-spacing:1px;margin:5px;border-radius:1px;text-shadow:0 1px 0 rgba(0,0,0,0.5);box-shadow:0 2px 2px rgba(0,0,0,0.2)}
.bton span{text-align: center;position:absolute;left:0;width:50px;background:rgba(0,0,0,0.5);border-top-left-radius:1px;border-bottom-left-radius:1px;border-right:1px solid rgba(0,0,0,0.15)}
.bton:hover span{background:#222;border-right:1px solid rgba(0,0,0,0.3)}
.bton.orange{background:#FF7F00}
.bton.purple{background:#8e44ad}
.bton.blue{background:#297fb8}
.bton.red{background:#e74c3c}