نگاهی به دکمه های زیر بیندازید، این ها دکمه هایی هستند که با خصوصیات CSS 3 طراحی شده اند و طراح اون ها نام BonBon را برای این دکمه ها در نظر گرفته. جالبه نه؟
BonBon به صورت مجموعه ای از کلاس های css مختلف پیاده سازی شده و به راحتی قابل استفاده است و تنها با اختصاص دادن نام کلاس مربوطه می توان دکمه هایی با اشکال و رنگ های مختلف ایجاد کرد. البته هنوز کمی زود است که بخواهیم از این دکمه ها در پروژه های طراحی وب استفاده کنیم اما بررسی استایل های نوشته شده و درک قدرت و انعطاف پذیری CSS 3 مسلما برای بعضی از افراد علاقه مند جالب است.
برای استفاده از این دکمه ها ابتدا این فایل را دانلود کنید و فایل buttons.css موجود در فایل zip را به صفحه ی وب خود اختصاص بدید. برای ایجاد یک دکمه می توانید از تگ a یا تگ های button یا input استفاده کنید. به طور مثال:
<a href="" class="button">Label</a>
با اختصاص دادن کلاس button به تگ a یک دکمه به صورت زیر ایجاد می شود، به همین سادگی:
همانطور که در ابتدا ذکر شد، bonbon شامل چندین کلاس مختلف برای ایجاد دکمه های متنوع است. این کلاس ها شامل کلاس هایی برای ست کردن رنگ، شکل کلی دکمه، اندازه و ... می باشند که در لیست زیر بیان شده اند:
• Color: orange, pink, blue, green, transparent
• Font: serif
• Material: glossy, glass
• Size: xs, xl
• Shape: round, oval, brackets, skew, back, knife, shield, drop, morph
• Disabled: disabled
فکر نمیکنم در مورد کلاس ها توضیح بیشتری نیاز باشد اما نکته ی قابل ذکر این است که شما می توانید از یک آیکن نیز در کنار دکمه ی خود استفاده کنید. این آیکن می تواند هر کاراکتری باشد، از حروف و اعداد گرفته تا Unicode symbol ها. به مثال زیر توجه کنید:
<a href="" class="button pink skew glossy" data-icon="❆">irpcn</a>
همانطور که مشاهده می کنید در کد بالا برای اختصاص دادن آیکن، از خصوصیتی با نام data-icon استفاده شده است.
html5 دارای خصوصیتی است که اصطلاحا به آن custom data attribute گفته می شود، به این معنی که شما می توانید داده های خود را به یک خصوصیت سفارشی در یک تگ اختصاص دهید و در زمان نیاز در صفحه وب توسط css یا جاوا اسکریپت به آن دست پیدا کنید. طبق استاندارد این خصوصیت با پیشوند data- شروع می شود و هر نامی میتوان برای ادامه ی آن در نظر گرفت. در این مثال نیز از نام icon به عنوان پسوند استفاده شده است. اگر نگاهی به کد های css کلاس button بیندازید مشاهده خواهید کرد که کاراکتر اختصاص یافته به خصوصیت data-icon توسط کلاس کاذب before مورد استفاده قرار گرفته است:
.button:before
{
content: attr(data-icon);
}
برای اطلاعات بیشتر به سایت طراح این دکمه ها مراجعه کنید.
و نکته ی آخر اینکه برای مشاهدۀ صحیح استایل ها حتما از نسخۀ آخر مرورگر ها استفاده کنید. ^_^