أخر الاخبار
CSS
0+53HD

20 كود زر التحميل و زر المعاينة HTML و CSS

صورة
Ahmed Alkoptan
اخر تحديث :

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

في هذا المقال سنستعرض أكثر من 20 كود HTML و CSS  لأزرر التحميل والمعاينة وغيرها.أكود الأزرر المستخدمة خفيفة الوزن ولا تؤثر على سرعة الصحفة.



كود زر التحميل والمعاينة HTML و CSS

كود زر التحميل والمعاينة HTML و CSS - Download button and preview button HTML and CSS

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

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



ميزات كود زر التحميل و زر المعاينة HTML و CSS

  • مظهر زرالتحميل و زر المعاينة جميل واحترفى.
  • تجربة مستخدم أفضل.
  • كود CSS نقى خفيف الوزن.
  • زر ذو حركة سلسة.
  • خاصية التحويم الرائعة.
  • نمط النص وتأثيراته.
  • سهل التخصيص.
  •  تنزيل كود زر التحميل و زر المعاينة CSS و HTML مجاناً.




خطوات إضافة كود زر التحميل و زر المعاينة في بلوجر /  Blogger

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



إضافة كود  زر تنزيل CSS و HTML مجانًا

  1. قم بالدخول إلى لوحة تحكم مدونة بلوجر / Blogger.
  2. افتح قسم المظهر، ثم انقر فوق خيار تعديل HTML.
  3. اضغط Ctrl + F  في الكيبورد وابحث علامة </head> والصقها فوقها الكود التالى ثم أنقر احفظ القالب الخاص بك.
 <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>


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

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





كود HTML و CSS أنواع مختلفة من الأزرار

الآن تعرف كيفية إضافة زر تنزيل في المدونة ،باستخدم HTML و CSS. استخدم أفضل ما يلبي أحتياجك. فيما يلي بعض أنواع كود زر التحميل و زر المعاينة التى يستخدمها أغلب المواقع. فقط قم بسخ كود الزر وقم بلصقة في مقالاتك.





كود زر تحميل بسيط

كود زر تحميل خفيف وبسيط يمكنك أستخدامة في المقالات بشكل مباشر.




<button class="download-btn">
  Download
</button>

كود زر التنبيه

كود زر بألوان مختلفة. زر التنبيه يمكنك تخصيصة حسب أحتياج المقال.



<!-- alkoptan tech buttons with  class names -->
<div>   
<style>
.btn {
  border-radius: 10%;
  border: none;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}

.success {background-color: #04AA6D;} /* Green */
.success:hover {background-color: #000000;}

.info {background-color: #2196F3;} /* Blue */
.info:hover {background: #0b7dda;}

.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Red */ 
.danger:hover {background: #da190b;}

.default {background-color: #e7e7e7; color: black;} /* Gray */ 
.default:hover {background: #ddd;}
</style>


<button class="btn success">Button 1</button>
<button class="btn info">Button 2</button>
<button class="btn warning">Button 3</button>
<button class="btn danger">Button 4</button>
<button class="btn default">Button 5</button>
</div>

<!-- alkoptan tech buttons with  class names -->


كود زر تحميل - زر المخطط التفصيلي

كود زر تحميل - زر المخطط التفصيلي

كود زر المخطط التفصيلي. يمكنك أستخدامة فى أغراض عديد، يمتلئ الزر بالون عند المرور عليه بالماوس.


<!-- alkoptan tech buttons with  class names -->
    <style>
.btn {
  border: 2px solid black;
  border-radius: 5px;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}

/* Green */
.success {
  border-color: #04AA6D;
  color: green;
}

.success:hover {
  background-color: #04AA6D;
  color: white;
}
</style>
<button class="btn success">Success</button>
<!-- alkoptan tech buttons with  class names -->


زر تحميل القائمة المنسدلة

كود زر لتحميل لوضع أكثر من رابط للتحميل بالزر. عند المرور بالماوس فوق رمز السهم تُفتح القائمة المنسدلة لروابط التحميل. يمكنك أستخدامة ذا كان لديك أكثر من رابط لتحميل الملف.


File Upload
رابط التحميل 1 رابط التحميل 2 رابط التحميل 3 

<!-- alkoptan tech buttons with class names --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
  background-color: #2196F3;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
}

.dropdown {
  position: absolute;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {
  display: block;
}

.btn:hover, .dropdown:hover .btn {
  background-color: #0b7dda;
}
</style>
<button class="btn">Button</button>
<div class="dropdown">
  <button class="btn" style="border-left:1px solid #0d8bf2">
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<!-- alkoptan tech buttons with class names -->

كود زر تحميل - (خاصية التحويم)

كود زر متحرك عند الإشارة عليه يُخرج سهماً عند التمرير،  لذلك تسمى هذة الخاصية يحوم_Hover.




<!-- alkoptan tech buttons with class names --> 
<style>
.button7 {
  border-radius: 4px;
  background-color: #f4511e;
  border-radius: 5%;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button7 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button7 span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button7:hover span {
  padding-right: 25px;
}

.button7:hover span:after {
  opacity: 1;
  right: 0;
}
</style>

<button class="button7"><span>Hover </span></button>
<!-- alkoptan tech buttons with class names -->

كود زر تحميل بعرض الشاشة

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




 
<!-- alkoptan tech buttons with class names --> 

<style>
.block {
  display: block;
  width: 100%;
  border: none;
  background-color: #1775d2;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.block:hover {
  background-color: #000000;
  color: white;
}<!-- alkoptan tech buttons with class names -->


كود زر النص

يعمل هذا الزر عندما تمر عليه بالماوس، يُظهر لون الخلفية.





<!-- alkoptan tech buttons with class names --> 
<style>
.btn4 {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  border-radius: 5%;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

.btn4:hover {background: #8f0a87;}

.success {color: #5df314;}
</style>

<button class="btn4 success">Success</button>
<!-- alkoptan tech buttons with class names -->



كود زر تحميل أو معاينة

مجموعة كبيرة بمظهر جميل. زر خفيف أشكال مختلفة يساعدك الزر على أبراز تنسيق مقالاتك بإحترافية.




<!-- alkoptan tech buttons with class names --> 	
<style>
.codebtn11{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;

}

.btn11 {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.btn11:hover, .btn:focus {
  color: #fff;
  outline: 0;
}

.first {
  -webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.first:hover {
  box-shadow: 0 0 40px 40px #e74c3c inset;
}

</style>

<div class="codebtn11">
<button class="btn11 first">Button 1</button>
</div>

<!-- alkoptan tech buttons with class names -->


كود زر التحميل والمعاينة 

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




<!-- alkoptan tech buttons with class names --> 
.arp-button,
 .arp-button2 {  
  position: relative;  
  display: inline-block;  
  height: 40px;  
  width: 170px;  
  line-height: 40px;  
  padding: 0;  
  border-radius: 50px;  
  background: #fdfdfd;  
  border: 2px solid #f84f4f;  
  margin: 10px;  
  transition: all 0.5s ease-in-out;  
 }  
 .arp-button2 {  
  border: 2px solid #36D7B7;  
 }  
 .arp-button:hover {  
  background-color: #f84f4f;  
 }  
 .arp-button2:hover {  
  background-color: #36D7B7;  
 }  
 .arp-button:hover span.circle,  
 .arp-button2:hover span.circle2 {  
  left: 100%;  
  margin-left: -45px;  
  background-color: #fdfdfd;  
  color: #f84f4f;  
 }  
 .arp-button2:hover span.circle2 {  
  color: #36D7B7;  
 }  
 .arp-button:hover span.title,  
 .arp-button2:hover span.title2 {  
  left: 40px;  
  opacity: 0;  
 }  
 .arp-button:hover span.title-hover,  
 .arp-button2:hover span.title-hover2 {  
  opacity: 1;  
  left: 28px;  
 }  
 .arp-button span.circle,  
 .arp-button2 span.circle2 {  
  display: block;  
  background-color: #f84f4f;  
  color: #fff;  
  position: absolute;  
  float: left;  
  margin: 5px;  
  line-height: 30px;  
  height: 30px;  
  width: 30px;  
  top: 0;  
  left: 0;  
  transition: .5s;  
  border-radius: 50%;  
 }  
 .arp-button2 span.circle2 {  
  background-color: #36D7B7;  
 }  
 .arp-button span.title,  
 .arp-button span.title-hover,  
 .arp-button2 span.title2,  
 .arp-button2 span.title-hover2 {  
  position: absolute;  
  left: 65px;  
  text-align: center;  
  margin: 0 auto;  
  font-size: 16px;  
  font-weight: bold;  
  color: #f84f4f;  
  transition: .5s;  
 }  
 .arp-button2 span.title2,  
 .arp-button2 span.title-hover2 {  
  color: #36D7B7;  
 }  
 .arp-button span.title-hover,  
 .arp-button2 span.title-hover2 {  
  left: 80px;  
  opacity: 0;  
 }  
 .arp-button span.title-hover,  
 .arp-button2 span.title-hover2 {  
  color: #fff;  
 }

</style>


<div id="wrap" style="text-align:center">  
<a class="arp-button" href="#" rel="no-follow" target="_blank">  
  <span class="circle"><i class="fa fa-laptop"></i></span>  
  <span class="title">معاينة</span>  
  <span class="title-hover">أنقر هنا</span>  
</a>  
<a class="arp-button2" href="#" rel="nofollow" target="_blank">  
  <span class="circle2"><i class="fa fa-download"></i></span>  
  <span class="title2">تحميل</span>  
  <span class="title-hover2">أنقر هنا</span>  
</a>  
</div><!-- alkoptan tech buttons with class names -->




كيفية التعديل على كود زر التحميل أو المعاينة:


جميع أكواد الأزرر المستخدمه بالمقال. يمكنك أستخدامها فى أى منصه سواء ووردبريس أو بلوجر وغيرها.




الخلاصة

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

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

 أتمنى أن يكون المقال مفيد لك وأذا كان لديك أى سؤال بشأن الأكواد المستخدمة فلا تتردد بالتعليق أو المرسلة وسيتم الرد على أستفسارك بأذن الله، لا تنسى مشاركة المقال ليستفيد غيرك ودعماً منك لتقديم محتوى مماثل.

تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات
إرسال تعليق

سعدنا بوجودك 😍 شكراً لك اترك تعليقك بمدى أستفادتك من المحتوى دعمنا لنا وسيتم الرد عليك في أقرب وقت. يسعدنا دائماً اقتراحاتكم بخصوص المحتوى وأذا كان لديك أى أستفسار لاتترد بالتعليق أو المراسلة عبر صندوق البريد.




    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -