Các nút CSS - Cách sử dụng 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.
Đ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: