Tombol CSS - Penggunaan bttn.css
Perpustakaan bttn.css menyediakan banyak koleksi gaya sederhana untuk tombol. Perpustakaan ini sepenuhnya gratis untuk penggunaan pribadi dan komersial. Tombol-tombol ini dapat disesuaikan dengan mudah.
Memuat bttn.css
Untuk memuat pustaka btns.css, buka tautan btns.css dan tempel baris berikut di bagian <head> halaman web.
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>Menggunakan Tombol
Buat tombol menggunakan tag tombol html dan tambahkan gaya bttn-slant, bttn-royal dengan penentu ukuran 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>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 = "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>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 = "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>Ini akan menghasilkan keluaran sebagai berikut -