3 Desain Flat Button dengan CSS – Bikin Web Jadi Makin Keren!

Design CSS Flat Button Tutorial

Tutorial kali ini kita akan belajar membuat css flat button. Flat yang dimaksud yaitu kita akan mendesain css tanpa gradient, tanpa radius lengkungan dan text shadow.

Belajar CSS dan memahaminya dapat membuat kita lebih kreatif dalam mendesain website agar lebih cantik dan keren. Oya tutorial ini kita ketikan manual dengan menggunakan Notepad yah. Yuk kita mulai belajar mendesain flat button dengan css.

CSS Flat Button – Square

css flat button square

Kita akan membuat css flat button sederhana yaitu berbentuk kotak. Caranya sangat mudah. Silakan kamu ketikan kode berikut dibawah.

Kode HTML:

<button class="button-flat">Download Now</button>

Kode CSS:

.button-flat {
	border: 1px solid #801515;        /* border: tebal[px] tipe[solid,dashed,dotted] warna[#hex, rgb()]; */
	background-color: #801515;        /* ubah warna background */
	color: #FFFFFF;                   /* ubah warna font */
	font-size: 16px;                  /* ubah ukuran font */
	padding: 0.5em 1em 0.5em 1em;     /* padding: top right bottom left; */
}
.button-flat:hover {
	opacity: 0.8;                     /* ubah tingkat transparansi saat cursor menuju button. 0.0 s.d 1.0 */
}
.button-flat:active {
	background: #550000;              /* ubah background saat button ditekan */
}

Bila kamu ingin merubah warna button, ubah background-color menjadi warna yang kamu inginkan dalam hex atau rgb(). Lihat referensi warna html pada link dibawah ini:

Daftar warna pada html: Kode Warna HTML

CSS Flat Button – Circle

css flat button circle

Setelah kita berhasil membuat css flat button berbentuk kotak, sekarang kita belajar membuat flat button berbentuk lingkaran. Lihat kode berikut ini.

Kode HTML:

<button class="button-flat-circle">Call US</button>

Kode CSS:

.button-flat-circle {
	border: 1px solid #801515;        /* border: tebal[px] tipe[solid,dashed,dotted] warna[#hex, rgb()]; */
	background-color: #801515;        /* ubah warna background */
	color: #FFFFFF;                   /* ubah warna font */
	font-size: 16px;                  /* ubah ukuran font */
	width: 100px;                     /* set panjang button. ukuran width = ukuran height */
	height: 100px;                    /* set tinggi button. ukuran width = ukuran height */
	line-height: 16px;                /* set line height = font size */
	text-align: center;               /* text posisi center */
	border-radius: 50%;               /* set radius sudut pada button */
}
.button-flat-circle:hover {
	opacity: 0.8;                     /* ubah tingkat transparansi saat cursor menuju button. 0.0 s.d 1.0 */ 
}
.button-flat-circle:active {
	background: #550000;              /* ubah background saat button ditekan */
}

Kamu bisa merubah radius pada button dengan mengubah border-radius menjadi ukuran yang kamu inginkan. Ukuran dalam persen (%) atau pixel (px).

Kamu bisa mencari referensi kode warna disini: Kode Warna HTML.

Button – Outline

css flat button outline

Kita akan membuat flat button outline, yaitu button yang tanpa warna background, hanya garis yang menjadi penegas nya. Caranya cukup simpel. Lihat kode dibawah ini.

Kode HTML:

<button class="button-flat-outline">Buy Now</button>

Kode CSS:

.button-flat-outline {
	border: 1px solid #801515;        /* border: tebal[px] tipe[solid,dashed,dotted] warna[#hex, rgb()]; */
	background: transparent;          /* set warna background menjadi transparan */
	color: #801515;                   /* ubah warna font */
	font-size: 16px;                  /* ubah ukuran font */
	padding: 0.5em 1em 0.5em 1em;     /* padding: top right bottom left; */
}
.button-flat-outline:hover {
	opacity: 0.8;                     /* ubah tingkat transparansi saat cursor menuju button. 0.0 s.d 1.0 */
}
.button-flat-outline:active {
	background: #550000;              /* ubah background saat button ditekan */
	color: #FFFFFF;                   /* set warna font menjadi putih */		
}

Sebuah website yang menampilkan desain menarik tentu akan membuat pengunjung web tersebut menjadi betah dan senang. Dengan CSS kita dapat mendesain website jadi lebih keren!

Bagi teman-teman yang ingin belajar membuat website, pelajari dulu bahasa HTML. Bahasa HTML merupakan dasar dari segala dasar bila kamu ingin membuat sebuah web from scratch.

Aku membuat sebuah materi belajar html untuk pemula. Penjelasan materi disertai gambar dan contoh kode html nya. Semua hanya menggunakan Notepad yang ada di komputer teman-teman loh!

Materi belajar html antara lain:

  • Struktur Dasar HTML
  • Cara Membuat Halaman Web
  • Cara Memasukan Video Youtube
  • Cara Memasukan Musik dari Spotify
  • Cara Membuat Daftar List Item
  • Cara Memasukan Twitter Timeline dan Instagram Posts
  • dan materi menarik lainnya

Kamu bisa mengakses materi belajar html di link berikut ini:

Belajar HTML Gampang Banget! – HTML Warrior #1

Demikian tutorial belajar css mendesain button menjadi lebih menarik dan keren. Jika bermanfaat, jangan lupa share ke lainnya yah, teman-teman!

Leave a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Shares
Scroll to Top