Các nút CSS - Hướng dẫn Nhanh

Một nút trên trang web là tác nhân chính nơi người dùng nhấp vào sau khi chọn hoặc nhập các đầu vào cần thiết và gửi chi tiết để nhận thông tin cần thiết. Hướng dẫn này tập trung vào mười thư viện CSS chính để làm cho các nút trở nên tuyệt vời, cụ thể là -

  • bttn.css- Thư viện bttn.css cung cấp một bộ sưu tập khổng lồ các kiểu đơn giản cho các nút. Thư viện này hoàn toàn miễn phí cho cả mục đích sử dụng cá nhân và thương mại. Các nút này có thể được tùy chỉnh dễ dàng.

  • Pushy Buttons - Thư viện Pushy Buttons là một thư viện CSS Pressable Buttons nhỏ.

  • btns.css - Thư viện nút btns.css là một tập hợp các Nút CSS giúp sử dụng chuyển tiếp mượt mà.

  • Social Buttons - Thư viện Social Buttons là một bộ CSS Buttons được tạo bằng CSS thuần túy và dựa trên Bootstrap và Font Awesome.

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

Thư viện bttn.css cung cấp một bộ sưu tập khổng lồ các kiểu đơn giản cho các nút. Thư viện này hoàn toàn miễn phí cho cả mục đích sử dụng cá nhân và thương mại. Các nút này có thể được tùy chỉnh dễ dàng.

Đang tải bttn.css

Để tải thư viện btns.css, hãy truy cập liên kết btns.css và dán dòng sau vào phần <head> của trang web.

<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.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 bttn-slant, bttn-royal với mã định kích thước 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>

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

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

Xác định màu sắc

Cũng giống như kích thước, bạn có thể xác định màu của nút bằng cách sử dụng CSS. Ví dụ sau đây cho thấy cách thay đổi màu của nút.

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

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

Sau đây là các kiểu khác nhau có sẵn trong bttn.css

Sr không. Phong cách Kích thước trung bình Màu chính Bản giới thiệu
1 bttn-xiên bttn-md bttn-chính
2 bttn-đoàn kết bttn-md bttn-chính
3 bttn-thuốc bttn-md bttn-chính
4 bttn-float bttn-md bttn-chính
5 bttn-material-flat bttn-md bttn-chính
6 bttn-material-circle bttn-md bttn-chính
7 bttn-fill-circle bttn-md bttn-chính
số 8 bttn-gradient bttn-md bttn-chính
9 bttn-thạch bttn-md bttn-chính
10 bttn-duỗi bttn-md bttn-chính
11 bttn-tối thiểu bttn-md bttn-chính
12 giáp bttn bttn-md bttn-chính
13 bttn-đơn giản bttn-md bttn-chính

Thư viện Pushy Buttons là một thư viện CSS Pressable Buttons nhỏ.

Đang tải bttn.css

Để tải thư viện pushhy-button.min.css, 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 = "pushy-buttons.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, btn-blue với mã định kích thước btn-lg.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--blue">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/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--blue">Large</button>
      <button class = "btn btn--df btn--blue">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
      <button class = "btn btn--sm btn--blue">Small</button>
   </body>
</html>

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

Xác định màu sắc

Cũng giống như kích thước, bạn có thể xác định màu của nút bằng cách sử dụng CSS. Ví dụ sau đây cho thấy cách thay đổi màu của nút.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--red">Large</button>
      <button class = "btn btn--df btn--green">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
   </body>
</html>

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

Thư viện các nút btns.css là một tập hợp các Nút CSS giúp sử dụng các chuyển tiếp mượt mà.

Đang tải bttn.css

Để tải thư viện btns.css, hãy truy cập liên kết btns.css và dán dòng sau vào phần <head> của trang web.

<head>
   <link rel = "stylesheet" href = "btns.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, btn-blue với mã định kích thước btn-lg.

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

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

Xác định màu sắc

Cũng giống như kích thước, bạn có thể xác định màu của nút bằng cách sử dụng CSS. Ví dụ sau đây cho thấy cách thay đổi màu của nút.

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

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

Xác định phong cách

Cũng giống như kích thước, màu sắc, bạn có thể xác định kiểu dáng của nút bằng CSS. Ví dụ sau đây cho thấy cách thay đổi kiểu của nút.

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

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

Thư viện Social Buttons là một bộ CSS Buttons được tạo bằng CSS thuần túy và dựa trên Bootstrap và Font Awesome.

Đang tải các nút xã hội

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

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

Sử dụng nút

Tạo một nút bằng cách sử dụng thẻ liên kết html và thêm các kiểu btn, btn-block với công cụ xác định xã hội btn-social.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

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

Đăng nhập bằng Twitter

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 = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

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

Đăng nhập bằng Twitter Đăng nhập bằng Twitter Đăng nhập bằng Twitter Đăng nhập bằng Twitter

Chỉ sử dụng các Biểu tượng

Ví dụ sau đây cho thấy cách chọn các nút chỉ biểu tượng.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>

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

Sau đây là các kiểu khác nhau có sẵn trong Social Buttons.

Sr.No. Phong cách Kích thước trung bình Cái nút Nút biểu tượng
1 btn-twitter btn-md Đăng nhập bằng Twitter
2 btn-bitbucket btn-md Đăng nhập bằng Bitbucket
3 btn-dropbox btn-md Đăng nhập bằng Dropbox
4 btn-facebook btn-md Đăng nhập Facebook
5 btn-btn-flickr btn-md Đăng nhập bằng Flickr
6 btn-btn-foursquare btn-md Đăng nhập với Foursquare
7 btn-btn-github btn-md Đăng nhập bằng Github
số 8 btn-btn-google btn-md Đăng nhập với Google
9 btn-btn-instagram btn-md Đăng nhập bằng Instagram
10 btn-btn-linkedin btn-md Đăng nhập bằng Linkedin
11 btn-btn-microsoft btn-md Đăng nhập với Microsoft
12 btn-btn-odnoklassniki btn-md Đăng nhập bằng Odnoklassniki
13 btn-btn-openid btn-md Đăng nhập với Openid
14 btn-btn-pinterest btn-md Đăng nhập với Pinterest
15 btn-btn-reddit btn-md Đăng nhập bằng Reddit
16 btn-btn-soundcloud btn-md Đăng nhập bằng Soundcloud
17 btn-btn-tumblr btn-md Đăng nhập bằng Tumblr
18 btn-btn-twitter btn-md Đăng nhập bằng Twitter
19 btn-btn-vimeo btn-md Đăng nhập bằng Vimeo
20 btn-btn-vk btn-md Đăng nhập bằng Vk
21 btn-btn-yahoo btn-md Đăng nhập bằng Yahoo

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ữ

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