ปุ่ม CSS - การใช้งาน btns.css

ไลบรารีปุ่ม btns.css คือชุดของปุ่ม CSS ที่ใช้ประโยชน์จากการเปลี่ยนที่ราบรื่น

กำลังโหลด bttn.css

ในการโหลดไลบรารี btns.css ให้ไปที่ลิงก์btns.cssและวางบรรทัดต่อไปนี้ในส่วน <head> ของเว็บเพจ

<head>
   <link rel = "stylesheet" href = "btns.css">
</head>

การใช้ปุ่ม

สร้างปุ่มโดยใช้แท็กปุ่ม html และเพิ่มสไตล์ btn, btn-blue พร้อมตัวระบุขนาด btn-lg

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-blue">Submit</button>
   </body>
</html>

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

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

คุณสามารถเพิ่มหรือลดขนาดของปุ่มโดยกำหนดขนาดโดยใช้ CSS และใช้พร้อมกับชื่อคลาสดังที่แสดงด้านล่าง ในตัวอย่างที่กำหนดเรามีการเปลี่ยนแปลงสี่ขนาด

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Large</button>   
      <button class = "btn btn-sm btn-blue">Small</button>
   </body>
</html>

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

การกำหนดสี

เช่นเดียวกับขนาดคุณสามารถกำหนดสีของปุ่มโดยใช้ CSS ตัวอย่างต่อไปนี้แสดงวิธีการเปลี่ยนสีของปุ่ม

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-red">Red</button>   
      <button class = "btn btn-lg btn-blue">Blue</button>
      <button class = "btn btn-lg btn-green">Green</button>
      <button class = "btn btn-lg btn-sea">Sea</button>   
      <button class = "btn btn-lg btn-yellow">Yellow</button>
      <button class = "btn btn-lg btn-orange">Orange</button>  
      <button class = "btn btn-lg btn-purple">Purple</button>   
      <button class = "btn btn-lg btn-black">Black</button>
      <button class = "btn btn-lg btn-cloud">Cloud</button>
      <button class = "btn btn-lg btn-grey">Grey</button>
   </body>
</html>

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

การกำหนดรูปแบบ

เช่นเดียวกับขนาดสีคุณสามารถกำหนดรูปแบบของปุ่มโดยใช้ CSS ตัวอย่างต่อไปนี้แสดงวิธีการเปลี่ยนรูปแบบของปุ่ม

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Regular</button>   
      <button class = "btn btn-lg btn-blue btn-round">Round</button>
      <button class = "btn btn-lg btn-blue btn-raised">Raised</button>
      <button class = "btn btn-blue btn-sm">Small</button>   
      <button class = "btn btn-lg btn-outline-blue ">Outlined</button>
   </body>
</html>

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