معي كل اضافه مشاهده وتنزيل

 البحث عن

]]></b:skin>

فوقه

.zr-download,.zr-demo,.zr-url{display: inline-flex;position: relative;direction: rtl;justify-content: space-between;flex-direction: row-reverse;align-items: center;column-gap: 20px;color: #ffffff!important;text-decoration: none;font-weight: bolder;padding: 10px 15px 10px 15px;font-size: 16px;border-radius: 20px;transition: .25s all;border-bottom: solid 3px #00000050;overflow: hidden;box-shadow: 0 0 2px #000;margin: 5px;}

.zr-download{background: linear-gradient(45deg,#7aa5e6,#0041a3);}

.zr-demo{background: linear-gradient(45deg,#3ee07c,#1e9600);}

.zr-url{background: linear-gradient(45deg,#f5af19,#f12711);}

.zr-download:before{background:no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 512 512' fill='%23000' %3E%3Cpath d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zM432 456c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z'/%3E%3C/svg%3E");}

.zr-demo:before{background: no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 576 512' fill='%23000' %3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z'/%3E%3C/svg%3E");}

.zr-url:before{background:no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 448 512' fill='%23000' %3E%3Cpath d='M288 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h50.7L169.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L384 141.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H288zM80 64C35.8 64 0 99.8 0 144V400c0 44.2 35.8 80 80 80H336c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h80c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");}

.zr-download:before,.zr-demo:before,.zr-url:before {content: "";display: block;width: 20px;height: 20px;padding: 5px;border-radius: 100%;box-shadow: 0 0 10px #fff;background-color: #fff!important;}

.zr-download:active,.zr-demo:active,.zr-url:active{border-bottom: solid 1px #00000050;inntransform: translate(0px,3px);}

.zr-download:after,.zr-demo:after,.zr-url:after{content: "";display: block;position: absolute;left: -10%;top: 0;width: 0;height: 100%;box-shadow: 0 0 20px 5px #fff;transition: unset;}

.zr-download:hover:after,.zr-demo:hover:after,.zr-url:hover:after{left: 120%;transition: 1s all;}

عند كل اضافه تضع هذا

<a class="zr-download" href="#" target="_blank">زر التحميل</a>

<a class="zr-demo" href="#" target="_blank">زر المعاينة</a>

<a class="zr-url" href="#" target="_blank">زر الزيارة او التوجه</a>

المربع

# تضيف الرابط

وسلامتكم