ازرار تحميل ومعاينة بشكل اكثر من رائع

بسم الله الرحمان الرحيم

اما بعد متتبعي ومتتبعات مدونة حاسوبي Astuce

في درس جديد حول اضافة ازرار تحميل ومعاينة بشكل اكثر من رائع

اولا لنشاهد التجربة ثم نتوجه الى كيفية التركيب

معاينة
تركيب الاضافة
توجه الى محرر HTML في مدونتك او موقعك وابحث عن الوسم التالي

]]></b:skin>

واضف فوقه الكود التالي

a{text-decoration: none;}
.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 #00c144;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #00c144;
}
.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: #00c144;
}
.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: #00c144;
}
.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: #00c144;
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;
}

تحديد الكل
وفي المكان التي تريد ان تضع في الازرار الصق الكود التالي

زر المعاينة

<a class="btn-slide" href="https://astuce-hassoubi.blogspot.com/" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">اضغط هنا</span>
</a>

زر التحميل

<a class="btn-slide2" href="https://astuce-hassoubi.blogspot.com/" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">اضغط هنا</span>
</a>

ثم غير حسب ما تريد كاسم الزر وغيرها من التغييرات
اي مشكل او سؤال اتركه في التعليق
الى هنا يكون درس اليوم قد انتهى

• غرّد
• شارك
• شارك
• شارك
• شارك