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