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



  • ۲۶
  • اردیبهشت

جلسه ۰۸ : استفاده از CSS Buttons – Beautons

  • دسته‌بندی‌ها :
جلسه ۰۸ : استفاده از CSS Buttons – Beautons
    • جزئیات
    • نوع محتواآموزشی

      مقدمه

      سلام خدمت دوستان و همراهان عزیز سایت پی وی لرن . با آموزش css_buttons در خدمتتون هستیم. در آخرین بخش این مجموعه آموزشی به استفاده از Beautons در Css Buttons و بارگیری Beautons در CSS Buttons خواهیم پرداخت.

      استفاده از Beautons در CSS Buttons

      کتابخانه Beautons buttons یک ابزار ساده CSS برای ایجاد دکمه است. این اجازه می دهد تا ترکیبی از سبک ها، ابعاد برای ایجاد یک مجموعه عظیم از دکمه های سازگار، قوی و جامد استفاده کنید.

      بارگیری Beautons در CSS Buttons

      برای بارگیری Beautons library، دانلود کنید CSS را از github و خط زیر را در قسمت <head> صفحه وب قرار دهید.

      مثال : 

      با استفاده از Button

      یک Button با استفاده از تگ دکمه HTML ایجاد کنید و سبک btn را اضافه کنید.

      مثال : 

      خروجی زیر را تولید می کند.

      تعریف Size

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

      مثال : 

      خروجی زیر را تولید می کند.

       

      تعریف Font Size

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

      مثال : 

      خروجی زیر را تولید می کند.

       

      تعریف Functional Buttons

      مثال زیر دکمه های عملکردی مختلفی را نشان می دهد.

      مثال : 

      خروجی زیر را تولید می کند.

       

      ترکیب Styles ها

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

      مثال : 

      خروجی زیر را تولید می کند.

       

      کلام پایانی

      در آخرین بخش این مجموعه آموزشی به استفاده از Beautons در Css Buttons و بارگیری Beautons در CSS Buttons خواهیم پرداخت. از این که همراه ما بودید متشکریم. موفق باشید.

      QR:  جلسه ۰۸ : استفاده از CSS Buttons – Beautons
      به اشتراک بگذارید