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

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

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

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

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 و نضيف الأزرار في المكان المناسب