Button CSS 3

[restles20]

سلام بر همگی دوستان عزیز
تو این تاپیک قصد قرار دادن چند تا دکمه زیبا و حرفه ای که توسط css 3 طراحی شدن رو دارم امیدوارم خوشتون بیاد
در ضمن اگر کسی از شما نمونه هایی هم دارن لطف کنید و اینجا قرار بدین تا یه منبع خوب و کامل ایجاد بشه یادتون هم نره که حتما یه پیش نمایش و لینک سالم دانلود هم بزارید
با تشکر

 

[restles20]

به عنوان اولین نمونه می خوام دکمه های حرفه ای و زیبا 3بعدی رو در اینجا برای دوستان قرار بدم
این دکمه رو با کد زیر در هر جای قالبمون که خواستیم فراخوانی می کنیم :

<a href="#" class="button pink">A BUTTON</a>

دستورات مربوط به Css هم به شرح زیره :

[LEFT].button {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px;
    position: relative;
    margin-bottom: 40px;
    border-radius: 10px;
    display: inline-block;
    text-decoration: none;
    background-color: #666666;    
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

    
.button:hover {
    box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.button:active {
    top: 7px;
    box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);    
}

.pink {
    box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
    background-color: #d7298b;
}

.pink:hover {
    box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.pink:active {
    box-shadow: 0 2px 0 #5e254c, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}
[/LEFT]

در فایل ضمیمه چند تا رنگ هم قرار دادم که شما هم برای تغییر رنگ می تونید کلاس های جدید مانند نمونه هایی که من نوشتم تعیین و استفاده کنید
در ضمیمه هم می تونید فایل مربوطه رو دانلود کنید و از اینجا هم پیش نمایش کد بالا رو ببینید