Membuat Ghost Button

Tren desain website sering kali berubah-ubah tiap tahunnya. Seperti contohnya flat design dan realistic design. Saat ini sedang ada perbincangan bahwa di tahun 2015 nanti, yang akan menjadi tren dalam website adalah tombolnya. Ghost Button. Begitulah para developer menyebutnya.

Jelas seperti namanya, Ghost Button ini berarti tombol hantu. Mengapa bisa dinamakan seperti itu? Bayangkan saja hantu yang identik dengan tubuh transparan, begitu pula dengan Ghost Button. Ini dapat diartikan tombol yang transparan. Sebenarnya di tahun 2014 ini pun sudah banyak website yang menggunakan Ghost Button.

Seperti contoh website berikut ini.

Lalu, bagaimana cara membuatnya? Mudah saja. Lihat kode HTML dan CSS di bawah ini :

Ini adalah HTMLnya, kita akan membuat yang simpel, sehingga yang dibutuhkan hanya tag div dan a.

<div>
	<a class="ghost" href="http://www.dumetschool.com/">Visit Our Website</a>
</div>

Dan ini CSSnya :

body, div{ 
	width:100%;
	height:100%;
	margin:0;
	background:#545e7a;
	position:absolute;
}
.ghost{
	/* posisi di tengah */
    display:inline-block;
	position: relative;
	top: 50%;
	left:50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	/* text styles */
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	font-size: 50px;
	letter-spacing: 10px;
	color:#ffffff;
	/* untuk modifikasi text*/
	text-decoration:none;
	text-transform:uppercase;
	/* menambahkan border */
	border:0.15em solid #fff;
	padding:0.4em 0.6em;
}
.ghost:hover{
	border-color:#545e7a;
	color:#545e7a;
	background-color:#FFF;
}

Sekarang lihat hasilnya :

Sangat simpel ya?

Ghost Button ini terkadang ukurannya lebih besar dari button biasanya. Tetapi, dia tidak akan menghalangi gambar backgroundnya. Mengapa? Tentu saja karena sifat transparannya. Semoga bermanfaat ya :)