عمل أزرار بحسب المحتوى الذي تستخدمه معاينة تحميل شراء وغيرها

<style>

.CNMUB{overflow:hidden;max-width:100%;margin:10px auto;clear:both;text-align:center;position:relative}

.CNMUB a{text-decoration:none;margin:0 5px 10px !important;position:relative;height:48px;line-height:48px;padding:0 15px !important ;overflow:hidden;display:inline-block;border-radius:4px;color:#fff;font-family:inherit;font-size:16px;transition:all .4s ease}

.CNMUB a:hover{background-color:#222}

.CNMUB a *{float:right;line-height:inherit}

.CNMUB i{font-size:20px;margin-left:8px}

.CNMUB img {width: auto !important;height: 30px !important;max-height: 30px !important;max-width: 40px !important;margin: 9px -6px 0 5px;}

.CNB1 {background-color: #2A9F65;}  

</style>

<div class="CNMUB">

<!--بداية الزر-->

<a class="CNB1" href="#" target="_blank">

<i class="fa fa-download"></i>   

<span>اسم الزر</span> 

</a>   

<!--نهاية الزر-->

</div>