أزرار تحميل و معاينة لقوالب بلوجر

شرح التركيب

.loading { text-transform:uppercase; width:150px; text-align:center; line-height:50px; position: initial; left:0;right:0;top:50%; margin:auto; transform:translateY(-50%); } .loading span { position:relative; z-index:999; color:#fff; } .loading:before { content:''; background:#3689cd; width:140px; height:40px; display:block; position:absolute; top:0;left:0;right:0;bottom:0; margin:auto; animation:2s loadingBefore infinite ease-in-out; } @keyframes loadingBefore { 0% {transform:translateX(-14px);} 50% {transform:translateX(14px);} 100% {transform:translateX(-14px);} } .loading:after { content:''; background:#ff3600; width:14px; height:60px; display:block; position:absolute; top:0;left:0;right:0;bottom:0; margin:auto; opacity:.5; animation:2s loadingAfter infinite ease-in-out; } @keyframes loadingAfter { 0% {transform:translateX(-50px);} 50% {transform:translateX(50px);} 100% {transform:translateX(-50px);} }

ثانيا أستخدام الأزرار

<br />
<div class="loading">
<a class="demo" href="**************" rel="nofollow"><span>المعاينــــــــة</span></a>
</div>




<br />
<div class="loading">
<a class="demo" href="**************" rel="nofollow"><span>التحميــــــــل</span></a>
</div>
</div>