سلام رفقا، امروز با یه آموزش باحال برای ساختن دکمه های شیک و جذاب با کد css با شما هستیم.
خیلی قبلترها که تازه طراحی وب باب شده بود ملت برای اینکه یه دکمه داخل سایتشون داشته باشند دست به دامن فتوشاپ می شدند و یه دکمه درست میکردند عکس می ساختند و می اوردند داخل سایتشون قرار میدادند.
اما خوب به مرور دیگه اینقد این آیتم ها داخل سایت ها زیاد میشد که کلا با اینترنت اون موقع سایته دو ساعت طول می کشید بالا بیاد و دیده بشه.
بعد از اینکه css اومد ملت دیدند چقد راحت می توند خیلی از کارهای که قبل این براش باید عکس طراحی می کردند و داخل سایت می گذاشتند تبدیل شد به چند خط کد.
خیلی راحت می تونستند با چند خط کد به محتوا رنگ بدند تصویر بسازند و بعد هم که css3 اومد خیلی از کارهای که با جاوا اسکریپت هم انجام میدادند حذف شد و کلی انیمیشن راحت با css3 قابل انجام بود.
خب یه دکمه ساده رو بیاین بسازیم.
معمولا برای اینکه بتونید یه دکمه ساده طراحی کنید به یه تگ a یه سری استایلها رو اختصاص میدید و با استفاده از اون یه دکمه طراحی میکنید.
مثلا یه دکمه برای دانلود میخوایم بسازیم.
<a rel="nofollow" href="#" class="btn-download">دانلود کنید!!</a>
حالا میخوایم این دکمه رو که با کلاس btn-download قرار ساخته بشه رو با css ایجاد کنیم.
.btn-download {
box-shadow:inset 0px 1px 0px 0px #d9fbbe;
background:linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
background-color:#b8e356;
border-radius:12px;
border:1px solid #83c41a;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:15px;
font-weight:bold;
padding:11px 35px;
text-decoration:none;
text-shadow:0px 1px 0px #86ae47;
}
خب به همین سادگی یه دکمه شیک با هم ساختیم. اما اگه دقت کرده باشید وقتی روی دکمه قرار میگیرید ممکنه رنگش عوض بشه یا یه اتفاقی بیفته. خب این حالت رو بهش میگن هاور موس(hover) . برای اینکه شما هم بتونید این حالت رو داشته باشید باید این مدلی کد رو تکمیل کنید.
.btn_download:hover {
background:linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%);
background-color:#a5cc52;
}
علاوه بر اینکه خود شما می تونید این کدها رو بنویسید وب سایتها و ابزارهای هستند که به کار شما سرعت می دند و شما به راحتی می تونید در وقت خودتون صرفه جویی کنید و با چند تا کلیک ساده دکمه های خاص طراحی کنید.
یکی از سایتهای که به شما می تونه در این زمینه کمک کنه سایت bestcssbuttongenerator هست. شما با استفاده از این سایت به راحتی می تونید دکمه های کاربردی تولید کنید.
خب امیدوارم این مطلب به دردتون بخوره و بتونید ازش استفاده کنید. 
. نظرات یا سوالات خودتون رو ارسال کنید.
درباره این سایت