no-style

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

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


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


خطوات تركيب أزرار الويب المعاينة والتحميل

تابع معي ...

أولا - توجه إلى لوحة تحكم مدونتك  من هنا 
2 - قالب ( المظهر ) >> تحرير HTML >>
3 - إبحث عن الوسم التالي باستخدام الكيبورد CTRL + F 
]]></b:skin>
4 - أضف الكود التالي قبله مباشرة (فوق)

#wrap {
    margin: 20px auto;
    text-align: center;
}
.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}
.btn-slide2 {
    border: 2px solid #efa666;
}
.btn-slide:hover {
    background-color: #0099cc;
}
.btn-slide2:hover {
    background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.btn-slide2:hover span.circle2 {
    color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.btn-slide2 span.circle2 {
    background-color: #efa666;
}
.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}
.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}
 وإضغط حفظ المظهر

الآن عندما تقوم بكتابة موضوع وتريد إضافة أزرار المعاينة والتحميل إضغط على تبويب  HTML 
وأضف الكود التالي في المكان الذي تريد
<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">اضغط هنا</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">اضغط هنا</span>
</a>
</div>
لا تنسى إستبدال # بالروابط الخاصة بك 


تم بحمد الله ...


أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

تعليق

أحدث أقدم