Tautan CSS ~ KODELOVER

Dengan CSS, link bisa ditata dengan cara yang berbeda.
Tombol Tautan Tautan Teks Link Link Link
Styling Links

Tautan dapat ditata dengan properti CSS apa pun (misalnya warna, font-family, latar belakang, dll.).
Contoh

a {
color:hotpink;
}

Selain itu, tautan dapat ditata dengan berbeda bergantung pada keadaan apa mereka berada.

Empat links states diantaranya yaitu:

    a:link - link normal yang belum dikunjungi
    a:visited- link yang telah dikunjungi pengguna
    a:hover - link saat pengguna mengungkitinya
    a:active- link saat diklik

Contoh

/ * Link yang belum dikunjungi * /
a:link {
    color:red;
}

/ * Link yang dikunjungi * /
a:mengunjungi {
    color:green;
}

/ * Mouse di atas link * /
a:hover {
    color:hotpink;
}

/ * Link yang dipilih * /
a:aktif {
    color:blue;
}

Saat menyetel gaya link state, ada beberapa aturan diantaranya yaitu:

a:hover HARUS datang setelah: link dan a:visited
a:acrive HARUS datang setelah a:hover

Hiasan teks

Properti hiasan teks sebagian besar digunakan untuk menghapus garis bawah dari tautan:
Contoh

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Warna latar belakang

Properti warna latar belakang dapat digunakan untuk menentukan warna latar belakang tautan:
Contoh

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Tombol advanced - Link

Contoh ini menunjukkan contoh yang lebih canggih dimana kita menggabungkan beberapa properti CSS untuk menampilkan tautan sebagai kotak / tombol:
Contoh

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

KODELOVER

Tautan CSS

Related Post