salam kakak semua, kali ini kita akan bertemu dengan design link dengan css. css merupakan salah satu style untuk website. css singkatan style sheet, sya juga menggunakan fitur ini untuk mendesign website saya.oke langsung saja lihat program css berikut.
<html>
<head>
<style>
.link a
{
text-decoration:none;
color:white;
background:red;
border-radius:4px;
padding:5px 10px;
}
.link_blue a
{
text-decoration:none;
color:white;
background:blue;
border-radius:4px;
padding:5px 10px;
}
</style>
</head>
<body>
<div class="link">
<a href="#">....... File</a>
</div>
<br/><br/>
<div class="link_blue">
<a href="#">........ File</a>
</div>
</body>
</html>
simpan dalam bentuk .html, seperti “link.html”. dan lihat di browser. kurang lebih akan tampak seperti pada gambar berikut ini :
penjelasan kode :
- <style> : Merupakan tag pembuka css
- </style> : merupakan tag penutup
- .link : merupakan class yang telah ditaruh di link html (diawali dengan titik, jika menggunakan id, maka diawali dengan # misalnya <div id=”link”>).
- text-decoration : untuk menghilangkan garis bawah pada link.
- color : untuk membuat warna text bisa diisi dnegan white = putih, black = hitam, ataupun dengan kode lainnya.
- border-radius :membuat sisi tombol melengkung (untuk sudut lengkung bisa dengan % atau px, tergantung kebutuhan).
- padding : untuk memberi jarak dari teks ke luar, bisa menggunakan “padding-top” untuk atas, padding-botton : untuk bawah, padding-right: untuk kanan, padding-left : untuk kiri. atau automatis seperti padding : 4px 10px, untuk atas bawah akan sama 4 px, dan kiri kanan sama10 px.
oh, ya maaf terlalu singkat, nanti di update lagi artikelnya. sampai bertemu di cara membuat website selanjutnya.