Blog Request tutorial? klik disini!

  • Membuat Ghost Button

    Ditulis oleh: Aulia Rahmah Alhafidz
    971 kali dibaca
    22 Nov / 2014 09:58

    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.

    Membuat-Ghost-Button

    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 :

    Membuat-Ghost-Button

    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 :)






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155