آموزش کار با دکمه ها یا Buttons در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با دکمه ها یا Buttons در CSS با من همراه باشید.

آموزش کار با دکمه ها یا Buttons در CSS

Free-Learn

دکمه ها یا Buttons در CSS

دکمه یا باتون یا به انگلیسی Button چیزی است که در یک صفحه وب قرار میگیرد و کاربر میتواند بروی آن کلیک نماید و سپس متن یا محتوایی را از سمت سایت دریافت نماید.

مثلا ما میتونیم بروی یک دکمه کلیک نماییم و یک پیغام به ما نمایش داده شود، یا میتوانیم با کلیک بروی یک دکمه یک فایل یا تصویر و.. را دانلود نماییم و دیگر مواردی که یک دکمه میتواند ایجاد نماید.

حال ما چندین نمونه دکمه میتونیم داشته باشیم :

  • دکمه قابل کلیک ولی بدون لینک
  • دکمه قابل کلیک و دارای لینک
  • دکمه انتقال اطلاعات از صفحه جاری به صفحه مقصد ( استفاده فقط در فرم ها )

دکمه قابل کلیک ولی بدون لینک : این دکمه ها لینک ندارند ، پس در نتیجه مسیر مقصد هم ندارند ، یعنی اگه کاربر روشون کلیک کنه به هیچ جایی منتقل نخواهند شد.

دکمه قابل کلیک و دارای لینک : ولی این دکمه ها لینک دارند، یعنی اگه کاربر روشون کلیک کنه میتونه به دیگر صفحات انتقال داده شود.

دکمه انتقال اطلاعات از صفحه جاری به صفحه مقصد : این نوع دکمه ها در درون تگ فرم یا Form مورد استفاده قرار میگیرند و کاربر با کلیک بروی این نوع دکمه ها اطلاعات یک فرم از صفحه جاری به صفحه ای در سرور منتقل می شود.

Free-Learn

کار با دکمه ها یا Buttons در CSS

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

از دکمه های نوع Submit در فرم ها جهت ارسال اطلاعات یک فرم به سرور استفاده می شود.

مثال شماره ۱ : ایجاد یک دکمه از نوع Button ( استفاده از تگ Button )

امتحان کنید

مثال شماره ۲ : ایجاد یک دکمه از نوع Button ( استفاده از تگ Input )

امتحان کنید

مثال شماره ۳ : ایجاد یک دکمه از نوع Submit در فرم جهت انتقال اطلاعات به سرور ( استفاده از تگ Input )

امتحان کنید

مثال شماره ۴ : ایجاد یک دکمه ی لینک دار ( با کلیک بروی آن کاربر به مکانی دیگر منتقل خواهد شد ) با استفاده از تگ a

امتحان کنید

Free-Learn

سفارشی سازی دکمه ها در CSS

ما به راحتی در CSS میتونیم دکمه ها را سفارشی سازی نماییم، هرچند در مثال های بالا باید دیده باشید که من از CSS برای آرایش دکمه ها استفاده میکردم.

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

ایجاد یک کلاس برای استفاده در تمامی نوع های دکمه ها

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

مثلا من کلاس زیر رو ایجاد کردم :

حالا میخوام از همین کلاس در تمامی دکمه های بالا ( که نوع های مختلفی داشتن ) استفاده کنم.

امتحان کنید

Free-Learn

ایجاد رنگبندی های مختلف برای دکمه ها

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

امتحان کنید

Free-Learn

گرد کردن دکمه ها در CSS

ما در CSS یک ویژگی داریم به اسم Border-radius که با استفاده از آن میتوانیم گوشه های یک عنصر را گرد نماییم.

پیشنهاد میکنم حتما آموزش کار با گوشه های گرد با border-radius در CSS را مشاهده نمایید.

مثال :

امتحان کنید

Free-Learn

نحوه ایجاد دکمه با خط دور لبه

در ادامه ی آموزش کار با دکمه ها یا Buttons در CSS میخواهیم با استفاده از ویژگی Border در CSS یک خط به دور لبه های یک عنصر بکشیم، حال در این قسمت میخوایم با استفاده از این ویژگی دکمه های جذابتری ایجاد کنیم.

پیشنهاد میکنم حتما آموزش کار با حاشیه ها یا Borders در CSS را مشاهده نمایید.

مثال شماره ۱ : پس زمینه سفید با رفتن ماوس بروی آن پس زمینه رنگی می شود

امتحان کنید

مثال شماره ۲ : پس زمینه رنگی با رفتن ماوس بروی آن پس زمینه سفید می شود. (برعکس حالت بالا)

امتحان کنید

Free-Learn

نحوه سایه دار کردن دکمه

با استفاده از ویژگی box-shadow به راحتی میتوان برای عناصر در یک صفحه وب سایه ایجاد کرد.

پیشنهاد میکنم حتما آموزش کار با سایه ها یا Shadows در CSS را مشاهده نمایید.

مثال شماره ۱ :

امتحان کنید

مثال شماره ۲ :

امتحان کنید

Free-Learn

نحوه تغییر اندازه دلخواه دکمه ها

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

اندازه های پیکسلی اندازه های ثابت و فیکس می باشند ولی اندازه های درصدی اندازه های واکنش گرا می باشند.

مثال شماره ۱ : استفاده از واحد اندازه گیری پیکسل برای مشخص کردن اندازه

امتحان کنید

مثال شماره ۲ : استفاده از واحد اندازه گیری درصدی ( برای تمام عرض کردن دکمه )

امتحان کنید

Free-Learn

نحوه ایجاد دکمه بروی تصویر

در ادامه میخواهیم یاد بگیریم که چگونه میتوان یک دکمه را بروی یک تصویر قرار داد.

امتحان کنید

Free-Learn

مثال های بیشتر از دکمه ها در CSS

مثال شماره ۱ :

امتحان کنید

مثال شماره ۲ :

امتحان کنید

Free-Learn

خب دوستان خسته نباشید، به پایان آموزش کار با دکمه ها یا Buttons در CSS رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید.

دریافت PDF یا پرینت این مطلب