Tombol/button yang sering digunakan untuk mengeksekusi suatu perintah memiliki tampilan yang standar dan terkesan monoton. Contoh button yang sering kita jumpai adalah tombol 'ok', 'cancel', 'back', 'login' dan lain-lain. Tombol tersebut biasanya terdapat pada sebuah form pengisian data seperti form login.
Pada postingan kali ini, saya akan memberikan sedikit tips agar tampilan tombol tersebut terkesan tidak monoton. Tombol tersebut dapat kita ganti dengan gambar-gambar sesuai dengan keinginan kita. Untuk lebih jelasnya mari kita ikuti langkah-langkahnya.
1. Membuat file html untuk form login
<html>
<head>
<title>Login Area</title>
</head>
<body>
<form method="post" action="proses.php">
<table width="50%" border="0" align="center" cellpadding="4" cellspacing="2">
<tr>
<td colspan="2"><h2>Login Area</h2></td>
</tr>
<tr>
<td width="29%">Username</td>
<td width="71%"><input name="username" type="text" id="username" size="30" maxlength="30" class="textfield" /></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" type="password" id="password" size="30" maxlength="30" class="textfield" autocomplete="off" /></td>
</tr>
<tr>
<td> </td>
<td><input name="login" type="submit" class="login" value="" size="15"/>
<input type="reset" name="Reset" class="reset" value="" /></td>
</tr>
</table>
</form>
</body>
</html>
2. Menambahkan Script CSS didalam tag head
<style type="text/css">
.login{
cursor:pointer;
background:url(login.png) no-repeat center;
width: 50px;
}
.reset{
cursor:pointer;
background:url(reset.png) no-repeat center;
width: 50px;
}
</style>
Berikut ini adalah tampilan hasil coding tesebut :
1. Tampilan Sebelum ditambahkan script CSS
2. Tampilan Setelah ditambahkan script CSS
Demikian Sedikit ilmu yang dapat saya bagi, semoga bermanfaat. Selamat mencoba...
