Para sobat, kali ini saya akan membahas sedikit tentang cara membuat tombol cantik menggunakan CSS dimana tombol ini menggunakan gambar sebagai latar belakangnya, baiklah langsung saja kita liat script berikut ini
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Link berbentuk tombol</title>
<style type="text/css">
body {margin-left:20%;
font-family:Verdana; font-size:12px;
font-weight:bold;}
a:link
{ text-decoration:none; background-color:#0066CC;
color:#FFFFFF; border-color:#003399; border-style:outset;
border-width:6px; padding:4px 4px 4px 4px;}
a:visited
{ text-decoration:none; background-color:#0066CC;
color:#FFFFFF; border-color:#003399; border-style:outset;
border-width:6px; padding:4px 4px 4px 4px;}
a:active
{ text-decoration:none; background-color:#0066CC;
color:#FFFFFF; border-color:#003399; border-style:outset;
border-width:6px; padding:4px 4px 4px 4px;}
a:hover
{ text-decoration:none; background-color:#0099FF;
color:#FFFFFF; border-color:#003399; border-style:outset;
border-width:6px; padding:4px 4px 4px 4px;}
td {padding: 12px 12px 12px 12px;}
</style>
</head>
<body>
<table width="100">
<tr>
<td><p><a href="komedi.html">KOMEDI</a></p></td>
</tr>
<tr>
<td><p><a href="horor.html">HOROR</a></p></td>
</tr>
<tr>
<td><p><a href="drama.html">DRAMA</a></p></td>
</tr>
<tr>
<td><p><a href="action.html">ACTION</a></p></td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
</html>
Nah para sobat untuk gambarnya diberi nama "tombol 1" dan "tombol 2" sesuai dengan pengaturan code CSS diatas:
Tombol ini juga dapat berfungsi sebagai Link dengan cara menambahkan source seperti berikut:
<td><p><a href="horor.html">HOROR</a></p></td> Source: "horor.html" Mudah kan
