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 -