أزرار تحميل بألوان مختلفة بشكل جزاب فى ملف psd

السلام عليكم ورحمة الله وبركاتة 

اهلاً بكم إخوانى الكرام ملف psd يضم أزرار ويب خاصة بالتحميل لإستخدامها فى مدونتك أو موقعك متوفرة بألوان مختلفة شكلها جزاب وأنيق حملها فقط وحصرياً من مدونة مدون أنا متأسف لانى لم أقوم بحفظ الصور على صيغة png لا بد من وجود برنامج فوتوشوب حتى يتم التعديل عليها ومن ثم حفظها على جهازك حجم الملف تقريباً لا يتجاوز عن الـ 327.06KB فى النهاية أتمنى أن الأزرار تعجبكم جميعاً.

تحميل الأزرار

اقرء المزيد

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

بسم الله الرحمن الرحيم ... السلام عليكم ورحمة الله وبركاتة 

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

إذهب إلى تحرير القالب وإبحث عن </body> وضع فوقة / قبله الكود التالى

<style>
.abt-button {
    margin: 50px auto;
    width: 200px;
}
 /* Get this button at mdwanblog.blogspot.com */
.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  /*GRADIENT*/
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.abt-button a, .abt-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>

لإضافة الزر إلى التدوينة html وضع الكود التالى 

<div class="abt-button">
      <a href="#">تحميل</a>
      <p class="up">click to begin</p>
      <p class="down">1.2MB .zip</p>
    </div> 

اقرء المزيد