ปุ่ม CSS - การใช้งาน Beautons

ไลบรารีปุ่ม Beautons เป็นชุดเครื่องมือ CSS ง่ายๆสำหรับการสร้างปุ่ม ช่วยให้สามารถใช้รูปแบบขนาดต่างๆร่วมกันเพื่อสร้างชุดปุ่มขนาดใหญ่ที่สม่ำเสมอแข็งแรงและมั่นคง

กำลังโหลด Beautons

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

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

การใช้ปุ่ม

สร้างปุ่มโดยใช้แท็กปุ่ม html และเพิ่มสไตล์ btn

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn"<Submit</button>
   </body>
</html>

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

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

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--small">Small</button> <br/> <br/> 
      <button class = "btn btn--large btn-blue">Large</button><br/><br/>
      <button class = "btn btn--huge">Huge</button><br/><br/>
      <button class = "btn btn--full">Full</button><br/><br/>
   </body>
</html>

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

การกำหนดขนาดตัวอักษร

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--alpha">Huge</button><br/><br/>
      <button class = "btn btn--beta">Large</button><br/><br/>
      <button class = "btn btn--gamma">Regular</button><br/><br/>
   </body>
</html>

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

การกำหนดปุ่มการทำงาน

ตัวอย่างต่อไปนี้แสดงปุ่มการทำงานต่างๆ

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--positive">Positive</button> <br/>  <br/>
      <button class = "btn btn--negative">Negative</button><br/><br/>
      <button class = "btn btn--inactive">Disabled</button><br/><br/>
      <button class = "btn btn--soft">Rounded</button><br/><br/>
      <button class = "btn btn--hard">Hard</button><br/><br/>
   </body>
</html>

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

การรวมสไตล์

ตัวอย่างต่อไปนี้แสดงวิธีการรวมรูปแบบของปุ่มต่างๆ

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--large btn--positive">Button</button>   <br/><br/>
      <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
      <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
      <p>A <button class = "btn  btn--natural">button</button> in a paragraph.</p><br/><br/>
   </body>
</html>

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

ก ในย่อหน้า