دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۳
  • آبان

جلسه ۵۴ : کار با طراحی عنصر button در CSS

  • دسته‌بندی‌ها :
جلسه ۵۴ : کار با طراحی عنصر button در CSS
    • جزئیات
    • نوع مطلبآموزشی

      مقدمه

      با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم. به آموزش چگونگی کار با طراحی عناصر button در css بپردازیم. در این پست آموزشی یاد خواهید گرفت که چه طور با تغییر دادن و دستکاری style عناصر button ، این عناصر را زیباتر و جذاب تر کنید. حتی می توانید قالب کلی یک button  را به اشکال هندسی مختلف و جذاب تغییر دهید.

      در آموزشهای قبلی css ما به موضوعاتی نظیر توابع انتقال و جابه جایی عناصر دو بعدی در css ،  توابع انتقال و جابه جایی عناصر سه بعدی در css و … پرداخته ایم.

      در ادامه آموزش در این مطلب به موضوع کار با طراحی عناصر button در css و تغییر دادن style آن ها می پردازیم.

      کار با طراحی عناصر button در css

      کار با طراحی عناصر button در css

      کار با طراحی عناصر button در css

      طراحی عناصر html در css نظیر button ها ، گزینه های زیادی مانند font-size ، background ، border و … را در بر می گیرد.

      مثال: طراحی ساده و پایه یک button :

      مثال : ساختار پایه ی Button
      خودتان امتحان کنید »

      تغییر دادن رنگ button

      با استفاده از ویژگی background-color می توانید رنگ button را تغییر دهید.

      مثال:

      مثال : رنگ بندی button
      خودتان امتحان کنید »

      تغییر دادن اندازه فونت button

      به راحتی می توانید با ویژگی font-size اندازه فونت را تعیین کنید.

      مثال:

      مثال : اندازه ی فونت در button
      خودتان امتحان کنید »

      فاصله داخلی محتوای button

      با ویژگی padding می توانید فاصله داخلی محتوای button را تنظیم کنید.

      مثال:

      مثال : ویژگی padding
      خودتان امتحان کنید »

      گرد کردن گوشه های button

      با استفاده از ویژگی border-radius می توانید گوشه های button را به میزان دلخواه گرد کنید.

      مثال:

      مثال : گرد کردن گوشه های button
      خودتان امتحان کنید »

      مثال ۲: تغییر دادن رنگ border یک button :

      مثال : رنگ border
      خودتان امتحان کنید »

      استفاده از خصوصیت hover در button

      با استفاده از انتخابگر :hover برای زمانیکه ماوس روی button می رود style جدیدی به آن اعمال می کنیم.

      استفاده از خصوصیت hover در button

      نکته: از خصوصیت transition-duration برای مشخص کردن سرعت رویداد hover استفاده می کنیم.

      مثال : خصوصیت hover
      خودتان امتحان کنید »

      افزودن افکت سایه برای button

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

      مثال:

      مثال : افکت سایه
      خودتان امتحان کنید »

      غیر فعال کردن button

      برای اینکار باید خصوصیت cursor را برابر با مقدار not-allowed قرار دهید. و برای اینکه غیر فعال بودن button  مشخص باشد. میتوانید میزان opacity آن را تغییر دهید.

      مثال:

      مثال : غیر فعال کردن button
      خودتان امتحان کنید »

      اندازه ی عرض button

      با استفاده از خصوصیت width می توانیم عرض عناصر button را مشخص کنیم :

      اندازه ی عرض button

      مثال : تعیین عرض عناصر button
      خودتان امتحان کنید »

      گروه بندی چندین button

      گروه بندی چندین button

      ابتدا خصوصیت margin را از button های مورد نظر حذف کرده ، سپس ویژگی float را با left مقدار دهی کنید.

      مثال:

      مثال : گروه بندی button
      خودتان امتحان کنید »

      مثال ۲- می توانید برای مجزا بودن button های یک گروه border آن ها را مشخص کنید:

      مشخص کردن border گروه بندی button

      مثال : مشخص کردن border در گروه بندی
      خودتان امتحان کنید »

      گروه بندی عمودی button

      گروه بندی عمودی button

      مثال ۳- برای گروه بندی عمودی button ها، به جای استفاده از ویژگی float:left از display:block استفاده کنید:

      مثال : گروه بندی عمودی button
      خودتان امتحان کنید »

      قرار دادن button روی تصویر

      قرار دادن button روی تصویر

      مثال : قرار دادن button روی تصویر
      خودتان امتحان کنید »

      اعمال افکت انیمیشن روی button

      می توانید با استفاده از قابلیت transition و رویداد hover برای حرکت ماوس روی button افکت های خاص خود را تعریف کنید :

      مثال : تعریف افکت در رویداد hover
      خودتان امتحان کنید »

      مثال-۲ تعریف افکت در رویداد active :

      مثال : تعریف افکت در رویداد active
      خودتان امتحان کنید »

      مثالی دیگر از افکت در رویداد hover:

      مثال : مثال دیگری از افکت گذاری
      خودتان امتحان کنید »

      اعمال افکت در رویداد Click :

      مثال : افکت گذاری در رویداد Click
      خودتان امتحان کنید »

      کلام آخر

      یکی از عناصر پر کاربرد و بخش های مهمی که تقریبا در تمام وب سایت ها بکار می رود عنصر button هستند، که style های متنوعی برای این عنصر نیز در CSS قابل پیاده سازی است، که در مباحث فوق مرور کلی بر کار با طراحی عناصر button در css داشته به برخی از این Style ها نیز اشاره کردیم.

      QR:  جلسه ۵۴ : کار با طراحی عنصر button در CSS
      به اشتراک بگذارید


      دیدگاه کاربران
      1. تصویر کاربر
        • تصویر کاربر
      2. تصویر کاربر
        • تصویر کاربر
      3. تصویر کاربر
        • تصویر کاربر