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

مطلب 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