40+ دکمه زیبای CSS از سایت Codepen

32 دیدگاه

پیدا کردن دکمه های 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!

 

در همین رابطه :   دریافت کدهای CSS مدیاکوئری Twitter Bootstrap

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!

 

در همین رابطه :   چگونه : کار با طراحی Responsive را شروع کنم؟

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!

 

در همین رابطه :   Bttn.css - دکمه های CSS بسیار زیبا با حجم 4KB

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!

 

امیدوارم درکارهاتون استفاده کنید و لذت ببرید . منتظر نظرات و پیشنهادات تون هستیم . اگر سایت یا منبع بهتری سراغ دارید بگین تا به اسم خودتون در سایت درج کنیم

منبع

 

دسته بندی : CSS

32 نظر

  1. سلام. خسته نباشید. مطالب بسیار مفید هستن و کاربردی. من خیلی از این مطلب خوشم اومد. امیدوارم همیشه موفق باشید. روزتون بخیر

  2. بنام خدا
    سلام
    بضعی از اینها کار نمیکنن ولی اونهائی که کار میکنن بسیار عالی هستن. هنوز همشو چک نکردم. اما بعنوان مثال همون دگمه اولی که باتن تول تیپ هست یا دگمه توئیتر یا … کار نمیکنن اگه کسی میتونه اینها رو راست و ریست کنه لطفا اینکار رو انجام بده و باز هم لطفا به ایمیل افراد فرستاده بشه. چون معلوم نیست که چه کسی و در چه زمانی اینکار رو انجام میده.
    با تشکر

  3. با سلام از این کلید ها چگونه باید در سایت خودمون استفاده کنیم که به طور کامل نمایش داده بشه و کار کنه؟؟

    باتشکر از سایت خوبتون منتظر پاسخ شما هستم

  4. سلام

    آقا تو رو خدا بگید من با این کدها چجور باید کار کنم
    روانی شدم بخدا

    مثلا
    Pure CSS button

    من کدش رو تو گذاشتم
    css رو هم جدا ذخیره کردم آدرس دادم

    و تو
    گذاشتم و هم تو

    گذاشتم
    اما کلا جواب نمیده. لطفا بگید کجای کار من اشتباهه

    با تشکر شدید از قبل

  5. سلام
    واقعا دستتون درد نکنه که این همه زحمت میکشید و اینارو جمع آوری میکنید
    خسته نباشید و موفق باشید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *