دکمه های رنگی

برای ساخت دکمه های رنگی چه کاری باید بکنیم؟؟

در این قسمت نمونه سورس کدی رو قرار دادم که با استفاده از اون توی صفحات وب میتونین دکمه های رنگی و جذابی رو ایجاد کنید. این کد تشکیل شده از دو قسمت که یکی از اونها با زبان css و دیگر زبان html نوشته شده. تو قسمت پایین کد هارو میگذارم و بعد در موردش توضیح می دم.

چی میخوایم بسازیم ؟؟

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

دکمه های رنگی

میبینید که قراره استایل جذابی رو برای دکمه ها خلق کنیم. یادتون باشه که وقتی بلد باشیم چطوری با html و css کار کنیم، خیلی راحت میتونیم این دکمه های رنگی رو طبق خواسته هامون طراحی کنیم و استایل های بی نهایت متفاوت و جذابی رو ایجاد کنیم.

کد html

خب، اول بریم سراغ کد html :

همونطور که می بینید کد html خیلی ساده ای خواهیم داشت. یک تگ div که همه ی دکمه ها توی اون قرار داره و در دل اون چند تا تگ button داریم که برای ایجاد گرادیان های رنگی مختلف وجود دارند. به هر کدوم از تگهای button یک کلاس مجزا که با شماره رنگ مشخص شده دادیم و یک کلاس مشترک بین همه دکمه ها به اسم btn-hover داریم که استایل کلی دکمه هارو هم در حالت عادی و هم در حالت هاور تعیین می کنه.

کد css

خب تو این قسمت کد css رو قرار می دیم.

بله میبینیم که کد css خیلی ساده ای هم داریم 🙂

در مرحله اول دستورات مربوط به استایل ظاهری دکمه ها رو داریم. برای مثال تعیین عرض و طول، مارجین ها، سایز فونت، border-radius و …

در مرحله دوم برای حالت hover دکمه ها دستور داده شده که موقیعت بک گراند تغییر کنه ( با استفاده از background-position ) و قرار بر این شده که این تغییرات به صورت یک موشن در ۰٫۴ ثانیه اتفاق بیفته ( با استفاده از دستورات transition )

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

حالا ما میتونیم با هر طوری که دلمون میخواد توی صفحاتمون این دکمه ها رو ایجاد کنیم. در ضمن حتما متوجه شدید که با تغییر کد رنگهای مربوط به هر گرادیان رنگی، میتونید طیف رنگ دلخواه خودتون رو ایجاد کنید.

نکات تکمیلی

یادتون نره که برای اینکه کد html و css ما با هم ارتباط برقرار کنن باید از تگ link استفاده کنیم.

میتونید از این دکمه ها تو هر جایی از صفحات وب استفاده کنید. فرقی نمیکنه از چه سیستمی استفاده میکنید. حتما در آینده توی یک قسمت مجزا نحوه ساخت دستورهای html و css توی سایتهای وردپرسی رو توضیح خواهم داد.

برای تولید گرادیان رنگ تو زبان css میتونید از این لینک هم استفاده کنید. بعدا مفصل در مورد نحوه استفاده از سایتی که لینکش رو گذاشتم توضیح خواهم داد.

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

اگه سوالی داشتی حتما کامنت بزار . در اولین فرصت جواب خواهم داد.

خندون باشی و موفق 🙂

دانلود فایل

 

 

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

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

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