بسم الله الرحمن الرحیم
مطلب 162 | روزنامه دیواری :: ترفندها
کد دکمه ی دانلود حرفه ای
استفاده از CSS
download
.
.
کد زیر به CSS هست ، اون رو به فایل خارجی CSS سایت خودتون اضافه یا در متن html وارد کنید.
a.download {
padding: 12px 20px 12px 20px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07rem;
color: #c0c0c0 !important;
position: absolute;
overflow: hidden;
width: auto;
background-color: white;
-moz-box-shadow: inset 0 0 0 4px #dedede;
-webkit-box-shadow: inset 0 0 0 4px #dedede;
box-shadow: inset 0 0 0 4px #dedede;
background-image:
url(http://cld.persiangig.com/preview/LtUKbncIcf/501188402113973845.png);
background-repeat: no-repeat;
background-position: 112px -34px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
a.download:link {
text-decoration: none;
}
a.download:hover,
a.download:focus {
color: #FFF !important;
padding: 12px 50px 12px 20px;
background-color: #53bf6b;
background-position: 112px 18px;
text-decoration: none !important;
-moz-box-shadow: inset 0 0 0 0 #CCC;
-webkit-box-shadow: inset 0 0 0 0 #CCC;
box-shadow: inset 0 0 0 0 #CCC;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
a.download:active {
}
در کد بالا دکمه طراحی شده ؛ برای استفاده در مطلب وبلاگ یا سایت فقط نیاز به فراخوانی داره :
<p><a class="download" herf="secad.ir" >download</a></p>
فایل ضمیمه ی کد css برای لینک به سند : http://cld.persiangig.com/preview/lImAyMUhAM/download-b.css
* مورد توجه دوستان تازه کار :)
برای لینک دادن به فایل cssسه راه وجود داره:
1- می توانید از سرویس بیان که به طور پیش فرض قابلیت کنترل کدهای css رو داره استفاده کنید.
2- استفاده از سایت پرشین گیگ (آموزش استفاده از پرشین گیگ : http://www.aparat.com/v/23BVO )
3- وارد کردن کد css در داخل html به طور مستقیم :
<style type="text/css">
/* your CSS codes */
</style>
منبع : secad.ir
