Cara mengatur posisi button/tombol di tengah (center) dengan CSS

Cara Mengatur Button ke Tengah dengan CSS

Pendahuluan

Selain menyesuaikan posisi tombol yang dirender agar sesuai dengan desain situs, Anda dapat menggunakan HTML untuk melakukan berbagai hal seperti menampilkan blog, memasukkan gambar ke dalam Blog, atau memasukkan audio / video ke dalam halaman Blog / website.

Untuk membuat tombol atau button dengan gaya/setelan khusus, Anda perlu menambahkan elemen yang berisi perintah-perintah tertentu seperti warna tombol, warna teks dari tombol tersebut, atau letak dari tombol ke dalam kode CSS ataupun html. Gambar di atas adalah contoh tombol yang menentukan parameter gaya khusus yang akan kita coba pelajari saat ini, yaitu menempatkan button di tengah (center).

Anda dapat mengatur posisi tombol atau button dengan CSS dan HTML

Membangun tombol dengan grafik khusus

Anda dapat membuat tombol agar sesuai dengan desain situs Anda. Akan tetapi, Anda harus tetap memperhatikan bagaimana tombol tersebut dapat dengan mudah terbaca atau dilihat dengan orang berkebutuhan khusus, mudah dipahami serta memiliki nama yang dapat diakses pembaca layar dan teknologi bantuan lainnya seperti voice reader, AI (Artificial Intelegence) maupun keyboard itu sendiri.

Untuk membuat tombol agar sesuai dengan desain situs Anda, Anda mungkin perlu mengatur posisi dari tombol tersebut dengan tujuan mempermudah pengunjung dalam mengaksesnya. Posisi tombol sangat penting untuk direncanakan terlebih dahulu guna mempermudah pengunjung yang memiliki kebiasaan tertentu seperti orang yang lebih sering menggunakan smartphone dengan tangan kiri atau kanan.

Format Umum

Format umum penggunaan jenis ini adalah:

<button>Ruang Makan</button>

Isi label dari button / tombol di atas sangat jelas yaitu "Ruang Makan", yang menunjukkan bahwa tombol tersebut menuju ruang makan (Sebagai contoh).

Mengatur Letak Tombol

Posisi tombol pada halaman web dapat disesuaikan sesuai dengan apa yang kita inginkan dengan cara menambahkan kode pada HTML itu sendiri atau dengan menambahkan pada kode CSS. Pada kode CSS, agar tombol dapat diposisikan sesuai dengan keinginan, kita perlu membungkus tombol tersebut ke dalam sebuah induk/container.

Berikut adalah contoh script kode penerapannya:

Code (jika disisipkan pada tag html)

Format umum penggunaan jenis ini, jika di sisipkan pada tag html adalah:

<center><button>Ruang Makan</button></center>

Code (jika menggunakan CSS)

Format umum penggunaan jenis ini, jika di tambahkan dengan style CSS adalah:

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

...
    .parent {
      display: grid;
      place-items: center;
  	}
  
  	/* Style Button */
  	.button-custom {
      display: inline-block;
      background: #4285F4;
      color: #fff;
      width: 240px;
      height: 50px;
      border-radius: 5px;
      border: thin solid #888;
      box-shadow: 1px 1px 1px grey;
      white-space: nowrap;
      font-size: 16px;
      font-weight: normal;
      font-family: 'Roboto', sans-serif;
      margin: 2rem 0;
  	}

No JS

Gambar dibawah ini adalah ilustrasi dari struktur button yang menggunakan script CSS sesuai dengan script diatas.

Catatan: Bagian yang terpenting jika menggunakan CSS pada masalah ini adalah .parent{}, untuk .button-custom{} bisa di sesuaikan dengan keinginan.

Prinsip Tombol

Ada beberapa prinsip yang harus diperhatikan dan diterapkan pada suatu tombol atau button, yaitu sebagai berikut:

Dapat diidentifikasi. Tombol harus menunjukkan bahwa mereka dapat memicu suatu tindakan.
Dapat ditemukan. Tombol harus mudah ditemukan di antara elemen lain, termasuk tombol lainnya.
Bersih. Tindakan dan status tombol harus jelas.

Praktikum

Current Browser Support:

Edge Firefox Chrome Safari

Praktikum 3.25: Mengatur posisi tombol di tengah pada halaman web.

Jalankan aplikasi Text Editor
Isikan kode dibawah ini kedalam text editor
Simpan file dengan nama posisi-button.html dan tempatkan ke dalam direktori kerja.
Jalankan file tersebut melalui web browser dan lihat hasilnya.

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Button</title>
    <style>
    .parent {
      display: grid;
      place-items: center;
  	}
  
  	/* Style Button */
  	.button-custom {
      display: inline-block;
      background: #4285F4;
      color: #fff;
      width: 240px;
      height: 50px;
      border-radius: 5px;
      border: thin solid #888;
      box-shadow: 1px 1px 1px grey;
      white-space: nowrap;
      font-size: 16px;
      font-weight: normal;
      font-family: 'Roboto', sans-serif;
      margin: 2rem 0;
  	}
    </style>
  </head>

  <!--[ <body> open ]-->
  <body>
    <center>
      <h1>Pandu Essentials</h1>
      <p>Mengatur Posisi Tombol</p>
    </center>
    
    <br />
    <h1>Pandu Essentials</h1>
    <div class="parent">
      <button name="button" class="custom">Sign in with Pandue</button>
    </div>
  </body>
  <!--[ </body> close ]-->
</html>

Gambar dibawah ini adalah Gambar hasil praktikum mengatur posisi button/tombol sesuai dengan script diatas.

Orang lain juga bertanya (FAQ)

Menggunakan text-align: Cara sederhana dengan properti text-align: center;.
Menggunakan margin: Memanfaatkan margin: 0 auto; untuk pusat horizontal.
Menggunakan Flexbox: Menerapkan display flex untuk pengaturan yang lebih fleksibel.
Menggunakan Grid: Menggunakan CSS Grid untuk penataan tombol di tengah.

Bagaimana cara mengubah warna tombol menggunakan CSS?

Anda dapat mengubah warna tombol dengan properti background-color di CSS.

Apa perbedaan antara Flexbox dan Grid dalam menengahkan tombol?

Flexbox digunakan untuk penataan elemen dalam satu dimensi, sementara Grid mengatur elemen dalam dua dimensi.

Apakah metode ini berfungsi untuk semua jenis tombol?

Ya, metode ini dapat digunakan untuk menengahkan tombol apapun, termasuk tombol HTML biasa dan tombol yang dihasilkan melalui CSS.

Apakah metode ini membuat tombol menjadi responsif?

Responsifitas tombol dapat dicapai dengan teknik tambahan, seperti media queries.

Bagaimana cara mengatur tombol di tengah secara vertikal?

Anda dapat mengatur tombol di tengah vertikal dengan menggunakan teknik Flexbox atau Grid dan properti seperti align-items.

Pandu Essentials

Table of Content

Cara mengatur posisi button/tombol di tengah (center) dengan CSS | Pandu Essentials

Post a Comment