Tombol CSS - Penggunaan Tombol Paksa
Pustaka Pushy Buttons adalah pustaka CSS Pressable Buttons kecil.
Memuat bttn.css
Untuk memuat pustaka pushy-buttons.min.css, unduh css dari github dan tempel baris berikut di bagian <head> halaman web.
<head>
<link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>Menggunakan Tombol
Buat tombol menggunakan tag tombol html dan tambahkan gaya btn, btn-biru dengan penentu ukuran 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>Ini akan menghasilkan keluaran sebagai berikut -
Mendefinisikan Ukuran
Anda dapat menambah atau mengurangi ukuran tombol dengan menentukan ukurannya menggunakan CSS dan menggunakannya bersama dengan nama kelas, seperti yang ditunjukkan di bawah ini. Dalam contoh yang diberikan, kami mengubah empat ukuran.
<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>Ini akan menghasilkan keluaran sebagai berikut -
Mendefinisikan Warna
Sama seperti ukuran, Anda dapat menentukan warna tombol menggunakan CSS. Contoh berikut menunjukkan cara mengubah warna tombol.
<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>Ini akan menghasilkan keluaran sebagai berikut -