 |
| Tombol cantik |
Pada postingan sebelumny kita telah membahas Cara Instalasi PHP, Mysql & Apache dengan Xampp kali ini kita akan langsung belajar Cara Membuat Tombol Cantik dengan PHP dan CSS.
Setelah kita mengaktifkan panel apache setelah itu carilah folder localdisk (C) --> xampp --> hotdoc di folder hotdoc inilah kita akan menempatkan script PHP kita agar bisa terbaca oleh browser.
buka teks editor bisa menggunakan notepad atau dreamweaver, di sini saya menggunakan notepad ++ karena lebih mudah mengetahui jika ada script yang error, jika belum punya notepad ++ bisa di download Di sini.
setelah di download eksrak lalu instal.
pertama ketikkan kode html seperti di bawah ini
<html>
<title>Tombol</title>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href='http:' class='tombol'>Tombol</a>
</body>
</html>
Lalu Simpan dengan nama Tombol.html
setelah itu buatlah kode css nya, ketikkan langsung presis seperti di bawah ini :
a.tombol {
display: block;
height: 10px;
width: 80px;
background: #34696f;
border: 0px solid rgba(33, 68, 72, 0.59);
color: ffffff;
text-align: center;
color: #ffffff;
font: bold 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding: 6px 8px 10px 8px;
background: -webkit-linear-gradient(top, #0206CB, #0206CB);
background: -moz-linear-gradient(top, #0206CB, #0206CB);
background: -o-linear-gradient(top, #34696f, #2f5f63);
background: -ms-linear-gradient(top, #34696f, #2f5f63);
background: linear-gradient(top, #34696f, #2f5f63);
-webkit-border-radius: 50px;
-khtml-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 5px;
-webkit-box-shadow: 0 0px 0 #1b383b;
-moz-box-shadow: 0 0px 0 #1b383b;
box-shadow: 0 0px 0 #1b383b;
text-shadow: 0 0px 0px rgba(255, 255, 255, 0.2);
}
a.tombol {
text-decoration: none;
}
a.tombol:hover {
background: #3d7a80;
background: -webkit-linear-gradient(top, #FF040A, #FF040A);
background: -moz-linear-gradient(top, #FF040A, #FF040A);
background: -o-linear-gradient(top, #3d7a80, #2f5f63);
background: -ms-linear-gradient(top, #3d7a80, #2f5f63);
background: linear-gradient(top, #3d7a80, #2f5f63);
text-decoration: none;
color: #000000;
cursor:pointer;
}
<title>Tombol</title>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href='http:' class='tombol'>Tombol</a>
</body>
</html>
Lalu Simpan dengan nama Tombol.html
setelah itu buatlah kode css nya, ketikkan langsung presis seperti di bawah ini :
a.tombol {
display: block;
height: 10px;
width: 80px;
background: #34696f;
border: 0px solid rgba(33, 68, 72, 0.59);
color: ffffff;
text-align: center;
color: #ffffff;
font: bold 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding: 6px 8px 10px 8px;
background: -webkit-linear-gradient(top, #0206CB, #0206CB);
background: -moz-linear-gradient(top, #0206CB, #0206CB);
background: -o-linear-gradient(top, #34696f, #2f5f63);
background: -ms-linear-gradient(top, #34696f, #2f5f63);
background: linear-gradient(top, #34696f, #2f5f63);
-webkit-border-radius: 50px;
-khtml-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 5px;
-webkit-box-shadow: 0 0px 0 #1b383b;
-moz-box-shadow: 0 0px 0 #1b383b;
box-shadow: 0 0px 0 #1b383b;
text-shadow: 0 0px 0px rgba(255, 255, 255, 0.2);
}
a.tombol {
text-decoration: none;
}
a.tombol:hover {
background: #3d7a80;
background: -webkit-linear-gradient(top, #FF040A, #FF040A);
background: -moz-linear-gradient(top, #FF040A, #FF040A);
background: -o-linear-gradient(top, #3d7a80, #2f5f63);
background: -ms-linear-gradient(top, #3d7a80, #2f5f63);
background: linear-gradient(top, #3d7a80, #2f5f63);
text-decoration: none;
color: #000000;
cursor:pointer;
}
Setelah selesai lalu simpan dengan nama style.css
ingat file tombol.html dan style.css harus disimpan dalam satu folder.
0 komentar:
Posting Komentar