با پیدا کردن دکمه های CSS زیبا این روزها کار چندان سختی نیست و با کمی گوگل کردن می تونید دکمه های خوب و سایت های button generator جالبی پیدا کنید .اما گاهی اوقات هست که واقعا دنبال دکمه های فوق العاده زیبا و در واقع بهترین ها هستید . در این مواقع هیچ جای دیگری مثل codepen.io وجود ندارد.
ما کار شما را آسان کرده ایم و حدود ۴۰+ دکمه بسیار زیبای CSS را از Codepen گلچین کردیم
Button Tooltips
در این مثال با رفتن ماوس روی دکمه یک tooltip ظاهر می شود
Pure CSS Badges
دکمه های زیبای css با افکتی زیبا بدون استفاده از جاوااسکریپت و صرفا با خود css !
CSS-only responsive buttons
دکمه های responsive که با تغییر سایز صفحه نمایش ، سایزشان خودکار عوض می شود (مث قالب فتولیا :))
Boxy Buttons
دکمه های سه بعدی جعبه ای شکل (آدم رو یاد سایت css-tricks می اندازه)
Buttons with Alt
نوع دیگری از دکمه های دارای tooltip
Scss/compass animated button
این دکمه های متحرک بیشتر شبیه قطب نما هستند
Minimal Circular 3D Buttons
دکمه هایی ساده و گرد ولی بسیار زیبا
Pure CSS button
دکمه ای ساده و زیبا و البته پرکاربرد
Windows 8 Metro
دکمه هایی از نوع ویندوز ۸ ولی فقط با CSS ایجاد شده اند
Button Styles
دکمه های زیبای SCSS
Toggle switch with checkbox:checked
یک دکمه مشکلی زیبا که می تونید به جای checkbox های معمولی ازش استفاده کنید
Twitter Share Button
یک دکمه ساده توییتر
۳D Button
دکمه سه بعدی زیبای سیاه css !
Light power button
دکمه روشن/خاموش زیبای سفید رنگ . این دکمه رو هم می شه به جای checkbox های معمولی استفاده کرد البته اگه به قالب تون بیاد 😉
Arcade Button
دکمه گذرگاه طاقدار (ترجمه Arcade) که فقط با css ساخته شده است
CSS power button
دکمه روشن/خاموش زیبا به رنگ قرمز
Pure CSS button switch
دکمه فوق العاده سویچ
BERG Cloud Buttons
دکمه های زیبای سایت BERG Cloud
۳D-ish Button
یک دکمه سه بعدی دیگر
۳D CSS3 Button
این دکمه هم یکی از دکمه های سه بعدی زیباست
Yes/No button switch
دکمه بله / خیر زیبا
Sign in Instagram Button
دکمه ورود اینستاگرام که فقط بوسیله css طراحی شده است
QUOTE.fm button
یک دکمه ساده و زیبای دیگر که با استفاده از CSS3 ساخته شده است
CSS3 Button Framework
دو سری دکمه های ساده css
Themeable Smurf Pill Button
اگر به دنبال دکمه ای قرصی شکل و زیبا هستید این برای شماست
CSS3 Animated Button/Key
یک دکمه زیبای دیگر همراه با افکت هاور
SASS Mixin Button
دکمه های CSS شیشه ای در رنگ های مختلف
Facebook Login Button
دکمه لاگین فیس بوک که احتمالا در خیلی سایت ها دیده اید
Twitter Button Concept
این دکمه دیگه واقعا فوق العاده است و قدرت CSS3 رو نشون میده چون فقط با css کار شده است
CSS Flat Button Shapes
اشکال مختلف که با css طراحی شده اند و در گوشه کنار سایت ها می شه ازشون استفاده کرد . مزیت شون سبک بودنشونه نسبت به عکس و عیب شون هم اینکه ممکنه در بعضی مرورگرها درست نمایش داده نشوند
Progress Bar Button
این هم یک progressbar و button یکجا ! دو تیر و یک نشان
Switch Button Single element
یک دکمه سویچ ساده و تمیز دیگر
CSS3 Soft Button
دکمه گرد و روشن css3
Pressable, iOS Compatible CSS Button
یک دکمه جعبه ای شکل دیگه
Switch Button
یک دکمه سویچ دیگر که با کلیک کردن پس زمینه صفحه رو عوض می کند
Rounded button with arrow
یک دکمه دیگه با گوشه های گرد و فلش
Red Panic Button
دکمه برجسته و سه بعدی قرمز رنگ
Simple Delete Cancel button
دکمه های Cancel و Delete با css
Smurf Pill Button
یه دکمه قرصی شکل دیگه
Tuenti button interaction
یک دکمه ساده و شیک که با css و javascript ساخته شده
CSS Login Button
یک دکمه لاگین زیبا همراه با افکت transitions جالب css
امیدوارم درکارهاتون استفاده کنید و لذت ببرید . منتظر نظرات و پیشنهادات تون هستیم . اگر سایت یا منبع بهتری سراغ دارید بگین تا به اسم خودتون در سایت درج کنیم
دست مریزاد واقعا خسته نباشد.
خیلی از لطف شما ممنونم دوست من
هیچ سایتی به این خوبی توضیح نداده
ممنون
موفق باشید
عالی بود ممنون.
خوشحالم مفید بوده دوست من
فوق العاده بود
واقعا که خسته نباشی
خوشحالم مفید بوده دوست من
خیلی عالی لذت بردم واقعا
جالب بود خسته نباشید
سلام دوست من
متشکرم
تشککککککککککککککر
سلام و تشکر
سلام دوست من
خوشحالم خوشتون اومده
سلام. خسته نباشید. مطالب بسیار مفید هستن و کاربردی. من خیلی از این مطلب خوشم اومد. امیدوارم همیشه موفق باشید. روزتون بخیر
مطلب خیلی خوبی بود ممنون
این مطالب واقعا مقید هستن و ارزش خرید دارن
راهنمای کاربردی و بسیار مفیدی بود. این مطالب واقعا ارزش خرید دارد.
عالیه عالیه عالیه
بنام خدا
سلام
بضعی از اینها کار نمیکنن ولی اونهائی که کار میکنن بسیار عالی هستن. هنوز همشو چک نکردم. اما بعنوان مثال همون دگمه اولی که باتن تول تیپ هست یا دگمه توئیتر یا … کار نمیکنن اگه کسی میتونه اینها رو راست و ریست کنه لطفا اینکار رو انجام بده و باز هم لطفا به ایمیل افراد فرستاده بشه. چون معلوم نیست که چه کسی و در چه زمانی اینکار رو انجام میده.
با تشکر
دمت گرم داداش عالی بودن
بسیار سپاسگذاریم
خیلی ممنون واقعا خیلی بدردم خورد
با سلام از این کلید ها چگونه باید در سایت خودمون استفاده کنیم که به طور کامل نمایش داده بشه و کار کنه؟؟
باتشکر از سایت خوبتون منتظر پاسخ شما هستم
میشه کمکم کنید این کدها رو کجای سایتم بزارم !
خواهش میکنم جوابمو بدین !
عالی بود
عالی بود خیلی وقت بود دنبال همچین چیزی میگشتم
سلام
آقا تو رو خدا بگید من با این کدها چجور باید کار کنم
روانی شدم بخدا
مثلا
Pure CSS button
من کدش رو تو گذاشتم
css رو هم جدا ذخیره کردم آدرس دادم
و تو
گذاشتم و هم تو
گذاشتم
اما کلا جواب نمیده. لطفا بگید کجای کار من اشتباهه
با تشکر شدید از قبل
سلام
واقعا دستتون درد نکنه که این همه زحمت میکشید و اینارو جمع آوری میکنید
خسته نباشید و موفق باشید
سلام
خواهش می کنم 🙂
Thanks
عالی هستن
ممنون
خواهش می کنم 🙂