ปุ่ม CSS - การใช้งาน 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>

การใช้ปุ่ม

สร้างปุ่มโดยใช้แท็กปุ่ม 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>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดขนาด

คุณสามารถเพิ่มหรือลดขนาดของปุ่มโดยกำหนดขนาดโดยใช้ 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>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดสี

เช่นเดียวกับขนาดคุณสามารถกำหนดสีของปุ่มโดยใช้ 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>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -