اضافه زر 3D فى بلوجر لى التحميل والمعاينه

السلام عليكم

الان اضف فى مدونتك زر لى التحميل والمعاينه لو اى شيئ فى مدونتك الزرار3Dالزر اكثر من رائع انهو بى تقنيه عاليه الدقك اسرع ىل الاضافه فى مدونتك

معاينه الزر

تحميل

معاينه

الاضافه اكثر من رائعه 
لى الاضافه فى مدونتك تابع 

كوم بى الدخول الى مدونتك من هنا


قالب-->تحرير HTML
وابحث عن الوسم ]]></b:skin>

اضف الكود قبله تماما

body {
font-family: Impact;
}
.button {
height: 80px;
width: 180px;
cursor: pointer;
margin: 50px auto;
}
.button .outer {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background: rgba(0,0,0,0.65);
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
-webkit-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
-moz-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
-webkit-transform: perspective(500px) rotateX(35deg);
-moz-transform: perspective(500px) rotateX(35deg);
}
.button .outer .height {
position: relative;
height: 100%;
margin-top: -15px;
padding-bottom: 15px;
background: #39a02d;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
-webkit-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
-moz-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
}    
.button:hover .outer .height {
margin-top: -10px;
padding-bottom: 10px;
background: #3aaf2d;
box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
-webkit-box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
-moz-box-shadow: rgba( 0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
}
.button:active .outer .height {
margin-top: 0px;
padding-bottom: 0px;
}
.button .outer .height .inner {
line-height: 2.8em;
font-size: 30px;
letter-spacing: .05em;
position: relative;
height: 100%;
text-align: center;
text-shadow: #8aff7b 0px 0px 1px;
background: #44d135;
background: -moz-linear-gradient(top, #80ec75 0%, #43d034 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80ec75), color-stop(100%,#43d034)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #80ec75 0%,#43d034 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, #80ec75 0%,#43d034 100%); /* W3C */
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
-webkit-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
-moz-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
}
.button:hover .outer .height .inner{
text-shadow: #99f48d 0px 0px 1px;
background: #43d034; /* Old browsers */
background: -moz-linear-gradient(top, #43d034 0%, #67e45c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43d034), color-stop(100%,#67e45c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #43d034 0%,#67e45c 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, #43d034 0%,#67e45c 100%); /* W3C */
}
.button:active .outer .height .inner{
text-shadow: #319926 0px 1px 0px;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
-webkit-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
-moz-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
background: #1d7d12; /* Old browsers */
background: -moz-linear-gradient(top, #1d7d12 0%, #4fd342 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d7d12), color-stop(100%,#4fd342)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* W3C */
}

والان عند كتابه موضوع حول الموضوع الى HTML

اضف الكود التالى  فى المكان المناسب 

<div class="button"><div class="outer"><div class="height"><div class="inner">DOWNLOAD</div></div></div></div>

وغير DOWNLOAD بى اى كلمه اخرى مثل .معاينه.تحميل.شاهد ايضا.الخ

لى اضافه الرابط بعد اضافه الكود فى المكان المناسب علم على الكلمه الزى اضفتها واضغط على الارتباط

   واضف الرابط 

والى اللقاء