Tombol CSS - Penggunaan Beautons
Pustaka tombol Beautons adalah toolkit CSS sederhana untuk membuat tombol. Ini memungkinkan untuk menerapkan kombinasi gaya, ukuran untuk membuat sekumpulan besar tombol yang konsisten, kuat, dan solid.
Memuat Beautons
Untuk memuat pustaka Beautons, unduh css dari github dan tempel baris berikut di bagian <head> halaman web.
<head>
<link rel = "stylesheet" href = "beauton.min.css">
</head>Menggunakan Tombol
Buat tombol menggunakan tag tombol html dan tambahkan gaya btn.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn"<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/beauton.min.css">
</head>
<body>
<button class = "btn btn--small">Small</button> <br/> <br/>
<button class = "btn btn--large btn-blue">Large</button><br/><br/>
<button class = "btn btn--huge">Huge</button><br/><br/>
<button class = "btn btn--full">Full</button><br/><br/>
</body>
</html>Ini akan menghasilkan keluaran sebagai berikut -
Mendefinisikan Ukuran Font
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/beauton.min.css">
</head>
<body>
<button class = "btn btn--alpha">Huge</button><br/><br/>
<button class = "btn btn--beta">Large</button><br/><br/>
<button class = "btn btn--gamma">Regular</button><br/><br/>
</body>
</html>Ini akan menghasilkan keluaran sebagai berikut -
Mendefinisikan Tombol Fungsional
Contoh berikut menunjukkan berbagai tombol fungsi.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--positive">Positive</button> <br/> <br/>
<button class = "btn btn--negative">Negative</button><br/><br/>
<button class = "btn btn--inactive">Disabled</button><br/><br/>
<button class = "btn btn--soft">Rounded</button><br/><br/>
<button class = "btn btn--hard">Hard</button><br/><br/>
</body>
</html>Ini akan menghasilkan keluaran sebagai berikut -
Menggabungkan Styles
Contoh berikut menunjukkan cara menggabungkan gaya tombol.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--large btn--positive">Button</button> <br/><br/>
<button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
<button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
<p>A <button class = "btn btn--natural">button</button> in a paragraph.</p><br/><br/>
</body>
</html>Ini akan menghasilkan keluaran sebagai berikut -
SEBUAH dalam sebuah paragraf.