مجموعه دکمه های شگفت انگیز CSS

یکی از مهمترین بخش هایی که یک توسعه دهنده CSS باید به آن توجه کند و موجب جذاب تر شدن سایتش می شود توجه به دکمه های سایت می باشد. چیزهای زیادی وجود دارد که یک برنامه نویس CSS میتواند به وبسایت خود اضافه کند. در این مقاله به معرفی مجموعه دکه های CSS می پردازیم.

نویسنده سید علی اندرزگو

مجموعه دکمه های شگفت انگیز CSS

یکی از مهمترین بخش هایی که یک توسعه دهنده CSS باید به آن توجه کند و موجب جذاب تر شدن سایتش می شود توجه به دکمه های سایت می باشد. چیزهای زیادی وجود دارد که یک برنامه نویس CSS میتواند به وبسایت خود اضافه کند. در این مقاله به معرفی مجموعه دکه های CSS می پردازیم.

دکمه ها ساده هستند اما گاهی اوقات می توانند وقت زیادی را صرف کنند و پروژه شما را به تاخیر بیاندازند. برای جلوگیری از این مشکل می توانید به سادگی همه دکمه های مهم را دانلود کرده و آنها را برای آینده ذخیره کنید. این فقط کار را ساده و موجب صرفه جویی در زمان شما می شود.

همه چیز درباره دکمه های HTML و CSS

برخی از دکمه هایی که ممکن است بخواهید را می توان به راحتی در اینترنت پیدا کرد و اگر بخواهید تعدادی از این کد ها را تنظیم کنید. ساختن چیزی از ابتدا یک گزینه خوبی نیست، زیرا اکثر وقت شما برای کد کردن و فکر کردن درباره تمام تنظیماتی است که باید انجام دهید. این حتی طول می کشد تا فکر کنید کدام نوع دکمه برای کد کردن در این سناریو وجود دارد. بنابراین برای کاهش کار و صرفه جویی در زمان، ما برخی از دکمه هایی که می خواهید سعی کنید.

کیت دکمه عمومی CSS

کیت Phill Hoyt نویسنده این دکمه است. در حال حاضر در حال حاضر توسط بسیاری از برنامه نویسان استفاده می شود تا دکمه ی وب سایت آنها یک نگاه کلاسیک داشته باشد. اگر روی تصویر زیر تمرکز کنید می بینید که چرا اینقدر مشهور است. این دکمه کد بسیار ساده تر است و می تواند وب سایت شما را بسیار کلاسیک تر کند

اگر این دکمه را دوست دارید، میتوانید این آن را دانلود کنید.

BootStrap-free CSS Buttons

دکمه ای که در قسمت پائین مشاهده می کنید متعلق به Tommy Hodgins در codepen.io است. تقریبا تمام انواع رنگ ها و تراکم آنها بر روی این دکمه ها کنترل می شود. در این دکمه می توانید تمام انواع رنگ ها و تراکم این رنگ ها را انتخاب کنید. اگر می خواهید برای این دکمه ها code گذاری کنید، روی پیوند کلیک کنید.

CSS Button Animation

الکس لومر نویسنده این کدها است. این کد ها در codepen.io آپلود شدند. بسیاری از سبک ها و طرح هایی برای رفتن وجود دارد. همانطور که از کد دیده می شود، بیشتر برنامه نویسی با استفاده از HTML5 و CSS3 Script انجام می شود که باعث می شود برنامه های توسعه خیلی ساده تر شوند. این دکمه ها به شما صفحه وب بسیار سخت نیست. اگر میخواهید کد را آزمایش کنید یا از آن استفاده کنید، به لینک بروید.

CSS Button Rollover- Growing border

این دکمه سفارشی CSS توسط r8n5n ساخته شده است و به codepen.io آپلود شد. این دکمه سفارشی CSS همراه با اعداد است. شما می توانید دکمه ها را بزرگ یا کوچک کنید و همچنین می توانید رنگ مورد نظر خود را انتخاب کنید. برای بررسی و استفاده از کد شما به سادگی می توانید به وب سایت مراجعه کنید و از کد استفاده کنید زیرا آنها برای استفاده رایگان هستند.

Record- CSS Button -styles

ترکیبات مختلفی از دکمه ها وجود دارد که می توانید انتخاب کنید زمانی که آن را به سبک ضبط CSS دکمه می آید که توسط ben yoseph در codepen.io آپلود شده است. در اینجا شما می توانید تمام انواع رنگ ها و فونت های مورد استفاده را پیدا کنید. این گزینه گزینه انتخاب دکمه سمت راست برای صفحه وب شما را فراهم می کند.

CODE| DEMO

CSS Buttons with pseudo-elements

ساخته شده و آپلود شده توسط Miwako Naksuka و بارگذاری شده در codepen.io. این شیوه ای است که در آن اندازه های مختلف و فونت های مختلف را پیدا خواهید کرد. شما می توانید از این دکمه ها هنگام استفاده از دکمه ها برای وب سایت خود استفاده کنید. این دکمه ها می توانند در هنگام ایجاد لینک ها برای یک سند خاص استفاده شوند.

Demo||Code

Big Jelly Button

در ابتدا توسط Olivia ng در codepen.io ایجاد شده است تا نوع دکمه ها را کلیک کنید. این نوع دکمه ها به طور خاص در اضافه می شود. این دکمه ها از Chrome، Edge Firefox و سایر مرورگرهای بزرگ پشتیبانی می کند. ساخته شده در مارس ۲۲، ۲۰۱۹ می تواند به عنوان یکی از آخرین دکمه ها در بازار استفاده شود. این با کمک HTML و CSS ساخته شده است.

CODE||DOWNLOAD

Circle Button

این دکمه ها دارای خاصیت خاصی هستند که دکمه های بسیاری ندارند. وقتی پرچم خود را بر روی آنها قرار می دهید رنگ آنها را پر می کند. در اصل توسط مارک ساخته شده و در codepen.io آپلود شده است، این دکمه ها در سال ۲۰۱۸ ساخته شده اند، بنابراین شما می توانید از آنها به عنوان دکمه های جدید و تازه استفاده کنید.

CODE||DEMO

Animated CSS Buttons

این یک دکمه است که عمدتا در زمان ورود به سیستم و ثبت نام در وب سایت استفاده می شود. این دکمه ArRolin طراحی شد و در codepen.io آپلود شد. این نوع دکمه ورود را ایجاد می کند و بخشی از وب سایت را کارآمد تر می کند. هنگامی که شما طراحی یک صفحه وب و می خواهید ورود به سیستم در دکمه پس از آن هیچ راهی وجود دارد که شما می توانید به اشتباه بروید. این دکمه ها با کمک HTML و CSS3 ساخته شده اند.

CODE||DEMO

Mouse hover effect with CSS

این دکمه ها ممکن است در ابتدا ساده ظاهر شوند اما بهتر از اکثر دکمه های خارج از آن هستند. این دکمه توسط Natail Davydova ایجاد شده بود و codepen.io آپلود شد. اثرات می تواند زمانی رخ می دهد که موشواره روی دکمه ها حرکت کند. این انتقالها تنها زمانی رخ می دهد که کد CSS مورد استفاده قرار گیرد.

CODE||DEMO

Effect on button after hover

نویسنده این دکمه Comehope است و همچنین در codepen.io آپلود شده است. این دکمه CSS خالص است که با کمک چیزی جز CSS ساخته شده است. این دکمه سازگار با تمام مرورگرهای بزرگ است. این برای کد بسیار ساده است و دکمه بسیار موثر برای استفاده است.

CODE||DEMO

Pill style button

Ana tudor نویسنده این دکمه است. برای ساخت این دکمه ها از HTML و CSS استفاده شده. این دکمه مانند قرص شکل گرفته و در تمام مرورگرها قابل اجراست. دکمه ها به نظر می رسد قرص ها و همانطور که بسیاری از دکمه های دیگر است.

CODE||DEMO

More Fancy buttons

Joshasuaual نویسنده این دکمه است. این در codepen.io آپلود شد. آنها ترکیبی از دکمه های مختلف هستند که برای هدف انیمیشن مورد استفاده قرار می گیرند. ساخته شده توسط HTML و CSS آنها مخصوصا برای ایجاد وب سایت جذاب تر استفاده می شود. انواع مختلفی از دکمه ها وجود دارد که برای ساختن دکمه جذاب تر می شوند چون شما می توانید آن را شیب تر یا متحرک تر و یا تغییر سوئیچ.

پاسخی بگذارید

ایمیل شما منتشر نشده و نزد ما محفوظ است.