ปุ่ม CSS - การใช้ปุ่มเร่งด่วน
ไลบรารี Pushy Buttons เป็นไลบรารี CSS Pressable Buttons ขนาดเล็ก
กำลังโหลด bttn.css
ในการโหลดไลบรารี pushy-buttons.min.css ให้ดาวน์โหลด css จากgithubและวางบรรทัดต่อไปนี้ในส่วน <head> ของเว็บเพจ
<head>
<link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>การใช้ปุ่ม
สร้างปุ่มโดยใช้แท็กปุ่ม html และเพิ่มสไตล์ btn, btn-blue พร้อมตัวระบุขนาด 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>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
การกำหนดขนาด
คุณสามารถเพิ่มหรือลดขนาดของปุ่มโดยกำหนดขนาดโดยใช้ CSS และใช้พร้อมกับชื่อคลาสดังที่แสดงด้านล่าง ในตัวอย่างนี้เรามีการเปลี่ยนแปลงสี่ขนาด
<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>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
การกำหนดสี
เช่นเดียวกับขนาดคุณสามารถกำหนดสีของปุ่มโดยใช้ CSS ตัวอย่างต่อไปนี้แสดงวิธีการเปลี่ยนสีของปุ่ม
<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>มันจะให้ผลลัพธ์ดังต่อไปนี้ -