Tombol CSS - Panduan Cepat

Tombol pada halaman web adalah aktor utama di mana pengguna mengklik setelah memilih atau memasukkan input yang diperlukan dan mengirimkan detailnya untuk mendapatkan informasi yang diperlukan. Tutorial ini berfokus pada sepuluh pustaka CSS utama untuk membuat tombol menjadi luar biasa, yaitu -

  • 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.

  • Pushy Buttons - Pustaka Tombol Paksa adalah pustaka Tombol Kecil yang Dapat Ditekan CSS.

  • btns.css - Perpustakaan tombol btns.css adalah sekumpulan Tombol CSS yang memanfaatkan transisi yang mulus.

  • Social Buttons - Pustaka Tombol Sosial adalah sekumpulan Tombol CSS yang dibuat dengan CSS murni dan didasarkan pada Bootstrap dan Font Awesome.

  • 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.

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 -

Berikut adalah berbagai gaya yang tersedia di bttn.css

No Sr Gaya Ukuran sedang Warna Primer Demo
1 bttn-miring bttn-md bttn-primer
2 bttn-unite bttn-md bttn-primer
3 bttn-pill bttn-md bttn-primer
4 bttn-float bttn-md bttn-primer
5 bttn-material-datar bttn-md bttn-primer
6 bttn-material-circle bttn-md bttn-primer
7 bttn-fill-circle bttn-md bttn-primer
8 bttn-gradien bttn-md bttn-primer
9 bttn-jelly bttn-md bttn-primer
10 bttn-stretch bttn-md bttn-primer
11 bttn-minimal bttn-md bttn-primer
12 bttn-bordered bttn-md bttn-primer
13 bttn-simple bttn-md bttn-primer

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 -

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 -

Perpustakaan Tombol Sosial adalah satu set Tombol CSS yang dibuat dengan CSS murni dan didasarkan pada Bootstrap dan Font Awesome.

Memuat Tombol Sosial

Untuk memuat pustaka bootstrap-social.css, unduh bootstrap-social.css dari github dan tempel baris berikut di bagian <head> halaman web.

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

Menggunakan Tombol

Buat tombol menggunakan tag anchor html dan tambahkan gaya btn, btn-block dengan penentu sosial btn-sosial.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Masuk dengan Twitter

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/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Masuk dengan Twitter Masuk dengan Twitter Masuk dengan Twitter Masuk dengan Twitter

Hanya menggunakan Ikon

Contoh berikut menunjukkan bagaimana memilih tombol ikon saja.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Berikut adalah berbagai gaya yang tersedia di Tombol Sosial.

Sr.No. Gaya Ukuran sedang Tombol Tombol Ikon
1 btn-twitter btn-md Masuk dengan Twitter
2 btn-bitbucket.dll btn-md Masuk dengan Bitbucket
3 btn-dropbox btn-md Masuk dengan Dropbox
4 btn-facebook.dll btn-md Masuk dengan Facebook
5 btn-btn-flickr.dll btn-md Masuk dengan Flickr
6 btn-btn-foursquare btn-md Masuk dengan Foursquare
7 btn-btn-github.dll btn-md Masuk dengan Github
8 btn-btn-google btn-md Masuk dengan Google
9 btn-btn-instagram btn-md Masuk dengan Instagram
10 btn-btn-linkedin btn-md Masuk dengan Linkedln
11 btn-btn-microsoft btn-md Masuk dengan Microsoft
12 btn-btn-odnoklassniki btn-md Masuk dengan Odnoklassniki
13 btn-btn-openid btn-md Masuk dengan Openid
14 btn-btn-pinterest btn-md Masuk dengan Pinterest
15 btn-btn-reddit btn-md Masuk dengan Reddit
16 btn-btn-soundcloud btn-md Masuk dengan Soundcloud
17 btn-btn-tumblr btn-md Masuk dengan Tumblr
18 btn-btn-twitter btn-md Masuk dengan Twitter
19 btn-btn-vimeo btn-md Masuk dengan Vimeo
20 btn-btn-vk btn-md Masuk dengan Vk
21 btn-btn-yahoo btn-md Masuk dengan Yahoo

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.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved