Các nút CSS - Sử dụng Beautons

Thư viện nút Beautons là một bộ công cụ CSS đơn giản để tạo các nút. Nó cho phép áp dụng kết hợp nhiều kiểu dáng, kích thước để tạo ra một tập hợp lớn các nút nhất quán, mạnh mẽ và chắc chắn.

Đang tải Beautons

Để tải thư viện Beautons, hãy tải xuống css từ github và dán dòng sau vào phần <head> của trang web.

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

Sử dụng nút

Tạo một nút bằng cách sử dụng thẻ nút html và thêm các kiểu btn.

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

Nó sẽ tạo ra kết quả sau:

Xác định kích thước

Bạn có thể tăng hoặc giảm kích thước của một nút bằng cách xác định kích thước của nó bằng CSS và sử dụng nó cùng với tên lớp, như được hiển thị bên dưới. Trong ví dụ đã cho, chúng tôi có bốn kích thước thay đổi.

<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>

Nó sẽ tạo ra kết quả sau:

Xác định kích thước phông chữ

<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>

Nó sẽ tạo ra kết quả sau:

Xác định các nút chức năng

Ví dụ sau đây cho thấy các nút chức năng khác nhau.

<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>

Nó sẽ tạo ra kết quả sau:

Kết hợp các kiểu

Ví dụ sau đây cho thấy cách kết hợp các kiểu của các nút.

<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>

Nó sẽ tạo ra kết quả sau:

A trong một đoạn văn.