1) Cascading style sheet pada button
Button merupakan
tombol yang dapat diklik. Pada tombol, baik submit, reset maupun button, style
CSS dapat digunakan untuk menimbulkan efek pipih (flat) pada tombol. Berikut
ini adalah contoh penggunaan CSS pada tombol flat :
<html>
<head>
<title>pengaturan pada
form tombol</title>
<style
="text/css">
input.button { color:#000000;
background: lightblue ;
border-color:white;
border-bottom-color:black;
border-top:1px
dotted;
border-bottom:1px
dotted;
border-left:
1px dotted;
border-right:1px
dotted;
font-family:verdana;
font-size:12px; }
</style>
</head>
<body>
<form
name="form1" method="post" action="">
<table >
<tr>
<td width="58"
>nama </td>
<td width="230"
>:
<input
type="text" name="nama">
</td>
</tr>
<tr>
<td
width="58">alamat</td>
<td width="230"
>:
<input type="text"
name="alamat">
</td>
</tr>
<tr>
<td></td>
<td ><input class="button"
type="submit" name="submit" value="simpan">
<input
class="button" type="submit" name="submit2"
value="submit">
</td>
</tr>
</table>
</form>
</body>
</html>
Efek style juga bisa diberikan saat button dilewati mouse. Untuk
memberikan efek berbeda saat button dilewati mouse dapat menggunakan selector
CSS input.button:hover . Untuk listing kode lengkapnya adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE>Pengaturan Pada
Form Tombol</TITLE>
<STYLE
="text/css">
input.button
{ color:
#fff;
background: #ffa20f;
border: 2px outset #BBD16D;
font-family:
"calibri", Times, serif;
font-size: 14px;
font-weight: bold;
width : auto; }
input.button:hover
{ color:
#fff;
background: #0c62a4; /*biru
kayak judul header*/
border: 2px outset #ffa20f;
font-family:
"calibri", Times, serif;
font-size: 14px;
font-weight: bold;}
</STYLE>
</HEAD>
<BODY>
<form
name="form1" method="post" action="">
<TABLE >
<TR>
<TD width="58"
>Nama </TD>
<TD width="230"
>:
<input
type="text" name="nama">
</TD>
</TR>
<TR>
<TD
width="58">Alamat</TD>
<TD width="230"
>:
<input
type="text" name="alamat">
</TD>
</TR>
<TR>
<TD></TD>
<TD ><input class="button"
type="submit" name="Submit"
value="Simpan">
<input
class="button" type="submit" name="Submit2"
value="Submit">
</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>
Bila listing tersebut
dijalankan akan muncul tampilan form dengan keadaan yang berbeda saat mouse
berada melewatinya dan tidak melewatinya. Dibawah ini keadaan button ketika
mouse tidak berada diatasnya. Style button yang bekerja saat mouse tidak
melewati button
input.button
{ color: #fff;
background:
#ffa20f;
border:
2px outset #BBD16D;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
Saat mouse melewatinya, button yang semula berwarna orange berubah
menjadi biru. Style untuk memberikan perubahan saat mouse melewati button
adalah
input.button:hover
{ color: #fff;
background: #0c62a4; /*biru kayak judul header*/
border: 2px outset #ffa20f;
font-family: "calibri", Times, serif;
font-size: 14px;
font-weight: bold;}
