Lagi-lagi CSS yang dapat membuat
website menjadi menarik. Nah ditutorial kali ini kita akan bergelut kembali
dengan script-script yang akan menghantui anda, Hallo !! Alay banget. Sedikit
bercanda sebagai refreshing setelah
selalu bergelut dengan yang namanya script. Ok seperti biasa kita akan bekerja
dengan dreamweaver ataupun notepad. Pasti anda sudah tak sabar untuk mengetahui
caranya. Nah ikuti tutorial saya berikut ini:
1.
Buka notepad atau dream weaver
2.
Ketikkan kode HTML dasarnya
<html>
<head>
<title>button
css</title>
</head>
<body>
</body>
</html>
3.
Ketik kode berikut sebagai dasar button :
<input type="submit"
name="button" class="button" value="publikasikan" />
Ganti teks yang berwarna merah dengan teks yang akan
anda tampilkan pada button.
Lalu masukan kode diatas setelah kode <body>,
sehingga menghasilkan kode sebagai berikut :
<html>
<head>
<title>button
css</title>
</head>
<body>
<input type="submit" name="button"
class="button" value="publikasikan"
/>
</body>
</html>
4.
Lalu masukkan kode CSS berikut sebelum kode
</head>
<style>
.button {
background:#000;
border-radius:20px;
color:#FFF;
}
.button:hover {
background:
#FC3;
border-radius:20px;
color:#000;
box-shadow:2px
2px 10px #000;
}
</style>
Sehingga menghasilkan kode berikut :
<html>
<head>
<title>button
css</title>
<style>
.button {
background:#000;
border-radius:20px;
color:#FFF;
}
.button:hover {
background:
#FC3;
border-radius:20px;
color:#000;
box-shadow:2px
2px 10px #000;
}
</style>
</head>
<body>
<input type="submit" name="button"
class="button" value="publikasikan"
/>
</body>
</html>
0 comments:
Post a Comment