050 CSS Button

CSS Button

Apa itu CSS Button?

CSS button adalah sebuah property CSS, yang dimana berfungsi untuk membuat desain tombol , dan bisa untuk desain tag button pada html.

Penerapan CSS Button

Note : gunakan class "button" pada html. jika ingin diterapkan contoh css dibawah. Cara membuat tombol (button) pada website menjadi lebih menarik :

• Membuat button dan warna button

Gunakan background-color pada pewarnaan button.

Contoh :

.button{
    background-color: black;
  }

jika ingin button terlihat menjadi berbentuk kotak gunakan css berikut :

.button {
    background-color: black;
    display: inline-block;
    font-size: 14px;
    margin: 6px 3px;
    /*color dibawah digunakan untuk warna pada teks di button*/
    color: white;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
  }

Tampilan yang dihasilkan :

• Jika ingin button ada lengkungan pada sudutnya

Gunakan border-radius, properti pada css yang digunakan untuk menambahkan lengkungan pada setiap sudut di suatu elemen.

Contoh :

.button {
    background-color: black;
    display: inline-block;
    font-size: 14px;
    margin: 6px 3px;
    /*color dibawah digunakan untuk warna pada teks di button*/
    color: white;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    /*border-radius*/
    border-radius: 20px;
  }

Tampilan yang dihasilkan :

Note : sesuaikan dengan kebutuhan, nilai pada border-radius bisa diubah.

• Button dengan effect shadow :

gunakan box-shadow, karena properti tersebut akan memberikan effect bayangan pada button.

Contoh :

.button {
    background-color: black;
    display: inline-block;
    font-size: 14px;
    margin: 6px 3px;
    /*color dibawah digunakan untuk warna pada teks di button*/
    color: white;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    /*box-shadow*/
    box-shadow: 3px 5px 0px 0 rgb(255 15 15);
  }

Nilai pada box-shadow bisa diubah dari transparan, ketebalan, posisi, dan ukurannya.

Tampilan yang dihasilkan :

• Mengubah ukuran button

Gunakan width, boleh menggunakan satuan px(pixel) atau persen(%)

Contoh width pada button menggunakan px(pixel) :

.button {
    /*width menggunakan 200px*/
    width: 200px;
    background-color: black;
    display: inline-block;
    font-size: 14px;
    margin: 6px 3px;
    /*color dibawah digunakan untuk warna pada teks di button*/
    color: white;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    /*box-shadow*/
    box-shadow: 3px 5px 0px 0 rgb(255 15 15);
  }

Tampilan yang dihasilkan :

Contoh width pada button menggunakan persen(%) :

  .button {
    /*width menggunakan 10%*/
    width: 10%;
    background-color: black;
    display: inline-block;
    font-size: 14px;
    margin: 6px 3px;
    /*color dibawah digunakan untuk warna pada teks di button*/
    color: white;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    /*box-shadow*/
    box-shadow: 3px 5px 0px 0 rgb(255 15 15);
  }

Tampilan yang dihasilkan :

• Button memiliki effect saat disentuh

Contoh :

  .button {
    background-color: black;
    display: inline-block;
    font-size: 14px;
    margin: 6px 3px;
    /*color dibawah digunakan untuk warna pada teks di button*/
    color: white;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    /*box-shadow*/
    box-shadow: 3px 5px 0px 0 rgb(255 15 15);
    transition: 0.4s;
  }
  /*gunakan hover jika ingin terlihat effect dan berubah warna pada saat button disentuh*/
  .button:hover {
    background-color: #ffffff;
    color: black;
  }

Referensi : https://www.w3schools.com/csS/css3_buttons.asp