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