Kita semua tahu kalau Microsoft telah merilis sistem operasi (OS) teranyar mereka Windows 8. Baru-baru ini, mereka telah merilis pembaruan hingga mencapai versi 8.1.
Yang baru dari Windows 8 adalah tampilan antarmuka “metro” yang kental dengan bentuk kotak-kotak. Desain ini sendiri terinspirasi dari gaya Swiss 60 tahun yang lalu, di mana fokusnya adalah layout yang bersih, mudah dibaca, dan tidak simetris.
Gaya ini tentunya berpengaruh pada pengembangan web, di mana banyak situs terkemuka luar negeri membuat rancangan dengan konsep metro ala Windows 8 ini.
Contoh yang paling konkret dapat dilihat dari situs The Verge (theverge.com), sebuah situs berita IT terkemuka asal Amerika. Selain membuat pola kotak asimetris, warna-warni pada design juga meniru prinsip antarmuka metro. Selain The Verge, kita juga bisa melihat referensi dari situs Xbox Australia, Chrome Webstore, serta situs Microsoft itu sendiri.
Kali ini kami akan memberikan tutorial cara membuat tombol ala Windows 8. Yang utama dari prinsip metro adalah, rancangan tombol yang bersih sehingga pengguna fokus kepada content dari tombol. Penggunaan font Segoe memberikan kesan bersih dan tipis pada tulisan di tombol. Di sini walau huruf yang digunakan terlihat tipis, berkat latar warna yang flat, tulisan tetap memiliki keterbacaan (readability) yang baik.
Berkat fitur CSS3, proses pembuatan tombol Metro menjadi mudah.
Berikut ini kode HTML-nya<a class="tombol-metro" href="#">Ini Contoh Metro Style Button</a>
Dan ini adalah CSS-nya.tombol-metro {
background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED);
background-repeat: repeat-x;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
text-align: center;
text-decoration: none;
font-size: 18px;
line-height: 38px;
padding: 20px 26px;
}
.tombol-metro:hover, .tombol-metro:focus, .tombol-metro:active, .tombol-metro.active {
background-color: #0072BB;
background-image: -moz-linear-gradient(center top , #0072BB, #0072BB);
background-repeat: repeat-x;
}
Demo tombol metro
