۲۶
اردیبهشت

جلسه ۰۲ : CSS Buttons – استفاده از bttn.css

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام خدمت دوستان و همراهان عزیز سایت پی وی لرن . با آموزش css_buttons در خدمتتون هستیم. در قسمت قبل راجع به کتابخانه ها بحث نمودیم. در این قسمت به معرفی و استفاده از bttn.css در CSS Buttons مانند بارگذاری bttn.css و تعریف Size و… می پردازیم.

CSS Buttons – استفاده از bttn.css

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

بارگذاری bttn.css

برای بارگذاری کتابخانه btns.css، به لینک btns.css بروید و خط زیر را در قسمت <head> صفحه وب قرار دهید.

مثال :

<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>

<head>

</head>

استفاده از Button

یک دکمه با استفاده از تگ دکمه HTML ایجاد کنید و سبک های bttn-slant، bttn-royal را با اندازه مشخص bttn-lg اضافه کنید.

مثال :

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-slant">Submit</button>
   </body>
</html>

<html>

<head>

</head>

<body>

<button class = "bttn-slant">Submit</button>

</body>

</html>

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

تعریف Size

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

مثال :

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg">Large</button>
      <button class = "bttn-pill bttn-md">Medium</button>
      <button class = "bttn-pill bttn-sm">Small</button>
      <button class = "bttn-pill bttn-xs">Extra Small</button>
   </body>
</html>

<html>

<head>

</head>

<body>

<button class = "bttn-pill bttn-lg">Large</button>

<button class = "bttn-pill bttn-md">Medium</button>

<button class = "bttn-pill bttn-sm">Small</button>

<button class = "bttn-pill bttn-xs">Extra Small</button>

</body>

</html>

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

تعریف Color

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

مثال :

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
      <button class = "bttn-pill bttn-md bttn-warning">Warning</button>
      <button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
      <button class = "bttn-pill bttn-xs bttn-success">Success</button>
      <button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
   </body>
</html>

<html>

<head>

</head>

<body>

<button class = "bttn-pill bttn-lg bttn-primary">Primary</button>

<button class = "bttn-pill bttn-md bttn-warning">Warning</button>

<button class = "bttn-pill bttn-sm bttn-danger">Danger</button>

<button class = "bttn-pill bttn-xs bttn-success">Success</button>

<button class = "bttn-pill bttn-xs bttn-royal">Royal</button>

</body>

</html>

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

کلام پایانی

در این قسمت استفاده از bttn.css در CSS Buttons رو دیدیم و می رونیم که کتابخانه bttn.css یک مجموعه عظیم از سبک های ساده برای دکمه ها فراهم می کند. در ادامه توضیحات بیش تری خواهیم داشت.

QR: جلسه ۰۲ : CSS Buttons – استفاده از bttn.css

به اشتراک بگذارید

آموزش CSS Buttons ,تعیین اندازه با استفاده از CSS ,رنگ دکمه با استفاده از CSS ,سبک های bttn-slant، bttn-royal در CSS Buttons

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

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

جلسه ۰۲ : CSS Buttons – استفاده از bttn.css

مقدمه

CSS Buttons – استفاده از bttn.css

بارگذاری bttn.css

استفاده از Button

تعریف Size

تعریف Color

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ