Tombol CSS - Penggunaan btns.css
Btns.css buttons library adalah satu set Tombol CSS yang memanfaatkan transisi yang mulus.
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 = "btns.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/btns.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/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Large</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/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>Ini akan menghasilkan keluaran sebagai berikut -
Mendefinisikan Style
Sama seperti ukuran, warna Anda dapat menentukan gaya tombol menggunakan CSS. Contoh berikut menunjukkan cara mengubah gaya tombol.
<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>Ini akan menghasilkan keluaran sebagai berikut -