Ok setelah membaca dan memahami tutorial sebelumnya yaitu
dan
Sekarang saat nya membongkar kembali file file sebelumnya yang kita punya,dan kita perindah website kita yaitu Membuat Tombol keren Dengan CSS dan HTML. cara nya sebagai berikut :
---> Pertama tama siapkan image atau gambar yang nantinya akan kita buat sebagai background pada teks tombol Kalo belum bisa membuat nya atau sedang malas bisa di download DISINI beserta script yang telah jadi :
---> Atau bila ingin ber kreasi dengan SOFTWARE PEMBUAT tombol tombol yang keren juga bisa di dapat kan SOFTWARE NYA DISINI
Ok langsung kita persiapkan semuanya sebagai berikut :
---> Buat sebuah script dengan nama "tombol.css" lalu masukan scipt tersebut di dalam nya :
#TombolPosting a:link, #TombolPosting a:visited {
display: block;
color: black;
text-decoration: none;
padding: 8px 10px 4px 10px;
margin-right: 5px;
background-image: url(image/tombol1.png);
background-repeat: no-repeat;
width: 180px;
height: 40px;
text-indent: 60px;
}
#TombolPosting a:hover {
background-image: url(image/tombol2.png);
background-repeat: no-repeat;
color: white;
}
#TombolPosting ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#TombolPosting li {
float: left;
}
.pemisah {
clear: both;
}
display: block;
color: black;
text-decoration: none;
padding: 8px 10px 4px 10px;
margin-right: 5px;
background-image: url(image/tombol1.png);
background-repeat: no-repeat;
width: 180px;
height: 40px;
text-indent: 60px;
}
#TombolPosting a:hover {
background-image: url(image/tombol2.png);
background-repeat: no-repeat;
color: white;
}
#TombolPosting ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#TombolPosting li {
float: left;
}
.pemisah {
clear: both;
}
--> Dan ini untuk file HTML nya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Contoh Link</title>
<link rel="stylesheet" type="text/css" href="tombol.css" />
</head>
<div id="TombolPosting">
<?php
session_start();
if (isset($_SESSION["user_name"]))
{
echo
"<a href='index.php?mod=daftarposting'>
Daftar Posting</a>";
echo "<br/>";
echo
"<a href='index.php?mod=isiposting'>
Mengisi Posting</a>";
echo " <br/>";
echo "<a href = 'index.php?mod=user'>
Menambah User</a>";
echo '<br/>';
echo
'<a href="logout.php">LogOut</a>';
}
else
{
echo
'<a href="index.php">Postingan Terbaru</a></li>';
echo '<br/>';
echo '<br/>';
include("setformsearch.php");
include("setformlogin.php");
}
?>
</div>
<div class="pemisah"></div>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Contoh Link</title>
<link rel="stylesheet" type="text/css" href="tombol.css" />
</head>
<div id="TombolPosting">
<?php
session_start();
if (isset($_SESSION["user_name"]))
{
echo
"<a href='index.php?mod=daftarposting'>
Daftar Posting</a>";
echo "<br/>";
echo
"<a href='index.php?mod=isiposting'>
Mengisi Posting</a>";
echo " <br/>";
echo "<a href = 'index.php?mod=user'>
Menambah User</a>";
echo '<br/>';
echo
'<a href="logout.php">LogOut</a>';
}
else
{
echo
'<a href="index.php">Postingan Terbaru</a></li>';
echo '<br/>';
echo '<br/>';
include("setformsearch.php");
include("setformlogin.php");
}
?>
</div>
<div class="pemisah"></div>
Letak pembuatan tombol pada script di atas yaitu :
<link rel="stylesheet" type="text/css" href="tombol.css" />
</head>
<div id="TombolPosting">
</head>
<div id="TombolPosting">
--->DAN
'<a href="index.php">Postingan Terbaru</a></li>';
echo '<br/>';
echo '<br/>';
--->Di akhiri dengan
</div>
<div class="pemisah"></div>
<div class="pemisah"></div>
---> Dan hasil nya sebagai berikut :
---> Nantinya jika kita sebelum dan menekan tombol tersebut akan ada warna biru dan hitam ,jadi lebih maniss terlihat nya...xixixixxi... :)
Dan sebelumnya juga aqu pernah memposting tentang bagai mana cara nya Membuat Mouse Unik Dengan JavaScript&Html tapi disana aqu membuat nya dengan JAVA SCRIPT
Hmmm...masih bingung??silahkan kirimkan komentar dan pertanyaan nya seputar Membuat Tombol keren Dengan CSS dan HTML...terusss..belajar...dan tetappppp...seeemaanggaaatttt... :)
0 komentar:
¿Deje un comentario? / Membuat Tombol keren Dengan CSS dan HTML