CSS Buttons - Sử dụng Pushy Buttons
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: