لبلوجر صفحات هايف 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> 

وسلامتكم