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 -