Membuat Rounded Button dengan CSS3

Seiring perkembangan teknologi web, salah satu teknologi yang juga berkembang adalah CSS (Cascading Style Sheet) yang sampai tahun ini sudah menjadi CSS3.CSS3 sekarang ini menjadi idola di kalangan web programmer.CSS3 memberikan kemudahan dalam membuat website yaitu sedikit desain tapi layout yang dihasilkan tidak kalah dengan desain murni, misalnya dalam membuat rounded button, dulu kebanyakan membuatnya dengan menggunakan image yang kemudian dijadikan background.Tapi dengan adanya CSS3 rounded button dapat dibuat dengan mudah hanya dengan sebaris kode sederhana.

Hanya saja, CSS3 sekarang masih belum mendukung di Opera dan IE.Mungkin tahun-tahun berikutnya akan mendukung di semua platform browser.🙂

Untuk tutorial kali ini, saya akan membahas bagaimana membuat rounded button, salah satu demo penggunaan CSS3.

Buat file html dan simpan dengan nama button.html

<html>
<head>
<title>Demo CSS3</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="submit" name="login" value="Login"/>
</body>
</html>

Kemudian untuk file cssnya simpan dengan nama style.css

input.submit{
 background:#0099FF;
 color:#FFFFFF;
 font:12px Arial;
 border:0px;
 -moz-border-radius:8px; /*rounded untuk mozilla*/
 -webkit-border-radius:8px; /*rounded untuk selain mozilla (chrome dll)*/
 padding:2px 10px;
 }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s