لبلوجر صفحات هايف Preview and download ازرار معاينة و تحميل احترافية

مشاهدات الان السلام عليكم

البحث عن

]]></b:skin>

فوقه

#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: 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 #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:hoverspan.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;
}

وثم ننسخ الكود التالي ونضعه في التدوينة :

<div id="wrap">
<a href="3" 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="4" 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>

وهذا تطبيق اخر

البحث عن احدهم

]]></b:skin>

او وافضل الاول

</style>

فوقه

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button lia.download{position:relative;padding:9px 48px 9px16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:01px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button lia.download:active{cursor:pointer}
.button li a.demo:after,.button lia.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:00 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

وهذا اخر

.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 lia.download{position:relative;padding:14px 48px 14px16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:01px rgba(0,0,0,0.1);line-height:normal;transition:all.3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 lia.download:hover{background:#666}
.button2 li a.demo:active,.button2 lia.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 lia.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:00 0 10px;color:#fff;padding:16px24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hovera.download:after{background:transparent;-webkit-animation:bounceright.3s alternate ease infinite;animation:bounceright .3s alternate easeinfinite}
@-webkit-keyframesbounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframesbounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

ورفع احدهم في جافا سكربت

<div style="text-align: center;">
<ul class="button">
<li><a class="مثال" href="https://sfehthayef.blogspot.com/"target="_blank">رابط المثال</a></li>
<li><a class="تحميل" href="https://sfehthayef.blogspot.com/"target="_blank">رابط التحميل</a></li>
</ul>
</div>
<div class="clear"></div>

او

<div style="text-align: center;">
<ul class="button2">
<li><a class="مثال" href="https://sfehthayef.blogspot.com/"target="_blank">رابط المثال</a></li>
<li><a class="تحميل" href="https://sfehthayef.blogspot.com/"target="_blank">رابط التحميل</a></li>
</ul>
</div>
<div class="clear"></div>

بس غير رابط مدونتنا

وهذا تطبيق اخر

البحث عن

]]></b:skin>

فوقه

#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:Electrolize,ge_dinar_tworegular;text-decoration:none;font-weight:100;background:#30abd5;letter-spacing:.5px;padding:10px20px;margin:10px;color:#fff;box-shadow:inset 0 0 0#22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all0.3s ease-out;}
a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px-50px 0px #22313F;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}
a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0#30abd5;}
a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px-50px 0px #30abd5;}
a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px#30abd5;} 0px -50px 0px #30abd5;}
والتطبيق يدوي بكل مقاله وهو جنب بعض
<div id="wrap"><a class="btn" href="#">تحميل اومعاينة</a></div>
<div id="wrap"><a class="btn warn" href="#">تحميل اومعاينة</a></div>

والتطبق الثاني البحث عن

البحث عن

]]></b:skin>

فوقه

.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 lia.download{position:relative;padding:14px 48px 14px16px;background:#f39c12;display:block;color:#fff!important;font-weight:100;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:01px rgba(0,0,0,0.1);line-height:normal;transition:all.3s;max-width:170px;margin:auto;overflow:hidden;font-family:Electrolize,ge_dinar_tworegular;}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 lia.download:hover{background:#666}
.button2 li a.demo:active,.button2 lia.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 lia.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:00 0 10px;color:#fff;padding:16px24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hovera.download:after{background:transparent;-webkit-animation:bounceright.3s alternate ease infinite;animation:bounceright .3s alternate easeinfinite}
@-webkit-keyframesbounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframesbounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

والتطبيق يدوي بكل مقاله وهو نحت بعض

<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="#" target="_blank">معاينة الرابط</a></li>
<li><a class="download" href="#" target="_blank">تحميلالرابط</a></li>
</ul></div>
<div class="clear"></div>