أضافة مميزة جدا و بشكل جديد حصريا على مدونة هلا تك

الاضافة عبارة عن ازرار معاينة و تحميل جميلة جدا

لمعاينة الأزرار

طريقة التركيب

أكواد css نبحث عن ]]></b:skin> و نلصق الكود التالي اعلاه

a{position:relative;padding:20px 50px;display:block;text-decoration:none;text-transform:uppercase;width:200px;overflow:hidden}

a span5{position:relative;color:#fff;fot-size:20px;z-index:1;margin:0;font-size:21px;color:#FFF;padding:12px 21px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}

a .liquid{position:absolute;top:-80px;left:0;width:200px;height:200px;background:#4973ff;box-shadow:inset 0 0 50px rgba(0,0,0,.5);transition:.5s}

a .liquid::after,a .liquid::before{content:'';width:200%;height:200%;position:absolute;top:0;left:50%;transform:translate(-50%,-75%);background:#000}

a .liquid::before{border-radius:45%;background:rgba(20,20,20,1);animation:animate 5s linear infinite}

a .liquid::after{border-radius:40%;background:rgba(20,20,20,.5);animation:animate 10s linear infinite}

a:hover .liquid{top:-120px}

@keyframes animate{0%{transform:translate(-50%,-75%) rotate(0deg)}100%{transform:translate(-50%,-75%) rotate(360deg)}}

a1{position:relative;padding:20px 50px;display:block;text-decoration:none;text-transform:uppercase;width:200px;overflow:hidden}

a1 span5{position:relative;color:#fff;fot-size:20px;z-index:1;margin:0;font-size:21px;color:#FFF;padding:12px 21px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}

a1 .liquid{position:absolute;top:-80px;left:0;width:200px;height:200px;background:#f25123;box-shadow:inset 0 0 50px rgba(0,0,0,.5);transition:.5s}

a1 .liquid::after,a1 .liquid::before{content:'';width:200%;height:200%;position:absolute;top:0;left:50%;transform:translate(-50%,-75%);background:#000}

a1 .liquid::before{border-radius:45%;background:rgba(20,20,20,1);animation:animate 5s linear infinite}

a1 .liquid::after{border-radius:40%;background:rgba(20,20,20,.5);animation:animate 10s linear infinite}

a1:hover .liquid{top:-120px}

@keyframes animate{0%{transform:translate(-50%,-75%) rotate(0deg)}100%{transform:translate(-50%,-75%) rotate(360deg)}}

ثانيا عند كتابة اي موضوع و رغبتنا باضافة الازرار

ننتقل الى عرض HTML و نضيف الأزرار في المكان المناسب

<a href="#"><span5>تحميل</span5><div class="liquid"></div></a>

<br />

<a1 href="#"><span5>معاينة</span5><div class="liquid"></div></a1>

أستبدل أشارة # برابط المعاينة او رابط التحميل

و شكرا

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع أزرار معاينة و تحميل بشكل متحرك متموج . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.