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