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

•  لمسة جمالية تعزز تجربة المستخدم

إضافة أزرار التحميل والمعاينة لا تقتصر فقط على الوظيفة، بل تمنح الموضوع مظهرًا أكثر تنظيمًا واحترافية.

• تنسيق أنيق

تُضفي هذه الأزرار لمسة بصرية جذابة تجعل المحتوى يبدو مرتبًا وسهل التصفح، مما يلفت انتباه القارئ من الوهلة الأولى.

•  وضوح وسهولة

وجود زر للمعاينة وآخر للتحميل يساعد في توجيه المستخدم بشكل واضح، ويجعل التفاعل مع الموضوع أكثر سلاسة وانسيابية.

•  تعزيز الاحترافية

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

•  تجربة متكاملة

الجمع بين الجمال والوظيفة يمنح المستخدم تجربة مريحة وممتعة، ويجعله أكثر رغبة في التفاعل والبقاء داخل الصفحة.

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

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

أكواد css نبحث عن / head و نلصق الكود التالي اعلاه

  <style>

.btn-bubble{color:white;background-color:#77b11c;background-repeat:no-repeat}

.btn-bubble:hover,.btn-bubble:focus{-webkit-animation:bubbles 1s forwards ease-out;animation:bubbles 1s forwards ease-out;background:radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 87% 119% / 1.08em 1.08em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 91% 91% / 0.71em 0.71em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 37% 97% / 1.13em 1.13em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 7% 84% / 1.16em 1.16em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 87% 107% / 0.86em 0.86em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 1% 99% / 0.79em 0.79em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 39% 117% / 0.6em 0.6em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 40% 90% / 0.6em 0.6em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) -1% 130% / 1.1em 1.1em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 82% 129% / 0.65em 0.65em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 79% 150% / 0.62em 0.62em;background-color:#f9ca24;background-repeat:no-repeat}

@-webkit-keyframes bubbles{100%{background-position:85% 4%,100% -8%,39% -46%,-1% -55%,88% -157%,-1% -99%,38% -269%,48% -79%,4% -337%,79% -203%,86% -164%;box-shadow:inset 0 -6.5em 0 #0072c4}}

@keyframes bubbles{100%{background-position:85% 4%,100% -8%,39% -46%,-1% -55%,88% -157%,-1% -99%,38% -269%,48% -79%,4% -337%,79% -203%,86% -164%;box-shadow:inset 0 -6.5em 0 #0072c4}}

.btn{display:inline-block;text-decoration:none;padding:1em 2em}

.btn-bubble1{color:white;background-color:#EA2027;background-repeat:no-repeat}

.btn-bubble1:hover,.btn-bubble1:focus{-webkit-animation:bubbles 1s forwards ease-out;animation:bubbles 1s forwards ease-out;background:radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 87% 119% / 1.08em 1.08em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 91% 91% / 0.71em 0.71em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 37% 97% / 1.13em 1.13em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 7% 84% / 1.16em 1.16em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 87% 107% / 0.86em 0.86em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 1% 99% / 0.79em 0.79em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 39% 117% / 0.6em 0.6em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 40% 90% / 0.6em 0.6em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) -1% 130% / 1.1em 1.1em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 82% 129% / 0.65em 0.65em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 79% 150% / 0.62em 0.62em;background-color:#FFC312;background-repeat:no-repeat}

@-webkit-keyframes bubbles1{100%{background-position:85% 4%,100% -8%,39% -46%,-1% -55%,88% -157%,-1% -99%,38% -269%,48% -79%,4% -337%,79% -203%,86% -164%;box-shadow:inset 0 -6.5em 0 #F79F1F}}

@keyframes bubbles1{100%{background-position:85% 4%,100% -8%,39% -46%,-1% -55%,88% -157%,-1% -99%,38% -269%,48% -79%,4% -337%,79% -203%,86% -164%;box-shadow:inset 0 -6.5em 0 #0072c4}}

.btn1{display:inline-block;text-decoration:none;padding:1em 2em}

</style>

  

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

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

<a href="#" class="btn btn-bubble">معاينـــة القالــب</a>

<a href="#" class="btn btn-bubble1">تحميـــل القالــب</a>

ثم قم بالحفظ و عاين الازرار

وفي الختام !

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