Membuat Link Menarik Pada Text Link Menggunakan CSS

Update Terakhir pada

Assalamualaikum Wr. Wb.

Kembali lagi bersama Webhozz Blog. Pada postingan ini saya ingin membagikan sedikit ilmu tentang CSS, yaitu tentang text hyperlink yang biasanya berisi teks biasa yang selalu kita gunakan untuk menuju halaman tertentu saat diklik. Biasanya Tampilan Standarnya seperti ini.

Biasanya text link seperti itu ketika sudah pernah kita klik, akan berubah menjadi warna ungu. Akan tetapi, saat belum diklik warnanya jadi warna biru. Hal tersebut pasti rasanya agak kurang enak menarik untuk dilihat kan? Jadi, di postingan ini kita akan membuat hal tersebut menjadi menarik semenarik mungkin. Disini kita akan membuatnya menjadi tombol yang menarik. Mari kita mulai.

Pertama kita buka aplikasi Sublime Text 3 (karena itu adalah aplikasi yang saya gunakan pada tutorial ini) dan Kita Buat Source Code HTML seperti berikut.

Kedua, mari kita sisipkan kalimat pada tag <title></title> dan masukkan scipt text linknya pada tag body. Perhatikan pada baris ke-4 dan baris ke-8 pada gambar di bawah ini.

Maka di browser akan tampil seperti ini tampillannya.

Ketiga, coba perhatikan tanda # di baris ke 8. Tanda pagar itu bertujuan agar teks linknya saat kita klik tidak kemana-mana dan tidak terjadi apa-apa karena link tersebut belum kita isi dengan link yang ingin kita tuju. Kemudian pada tag <head></head>, kita isi dengan kode css sebagai berikut (coba perhatikan baris 6 sampai baris 20).

Maka tampilannya akan berubah seperti di bawah ini.

Keterangan dari koding CSS tersebut adalah:

No Script Kode Baris Fungsi
1 <style type=”text/css”></style> 6 dan 19 Sebagai pembuka kode CSS
2 a 7 Dalam HTML, a merupakan tag untuk text link. Jadi dalam style css ini nanti akan berpengaruh langsung pada text link pada tab <body></body>
3 {} 8 Membuat tanda yang merupakan fungsi penyusun pada objek yang ingin dijadikan fungsi css.
4 text-decoration: none; 9 Untuk menghlilangkan garis bawah pada text link
5 color: black; 10 Untuk membuat warna text linknya. Disini warnanya black, berarti warna tulisannya menjadi hitam. Untuk ganti warna, kita bebas gunakan kode warna lainnya.
6 background-color: orange; 11 Untuk mengganti warna background menjadi orange. Untuk ganti warna, kita bebas gunakan kode warna lainnya.
7 font-family: arial; 12 Untuk mengganti format font text linknya. Biasanya teks defaultnya Times New Roman, jadi disini diganti menggunakan font Arial pada text link.
8 font-weight: bold; 13 Untuk membuat text linknya menjadi tebal.
9 border: 1px solid black; 14 Membuat garis tepi pada kotak text linknya dengan tebal 1px dengan style solid yaitu garis dan warna hitam dengan setting black.
10 line-height: 50px; 15 Membuat posisi text link berada di tengah kotak.
11 margin: auto; 16 Membuat posisi keseluruhan bisa menjaga jarak secara otomatis.
12 padding: 10px; 17 Membuat posisi tulisan text linknya di tengah kotak dengan posisi jarak 10px pada sudut atas, kanan, bawah, dan kiri.
13 border-radius: 5px; 18 Membuat sisi kotak pada teks link menjadi lebih tumpul dengan radius 5px, secara otomatis tajamnya sisi kotak akan berubah dengan ketumpulan dengan radius 5px.

 

Ke empat, stylenya memang sudah berubah. Tapi saat kita arahkan mouse ke text link tersebut, warnanya tidak berubah. Sebenarnya sih gak apa-apa, hanya saja kita perlu menambahkan style agar text linknya keliatan makin interaktif. Oke, kita lanjutkan koding css seperti berikut di bawah script a{} tadi (perhatikan baris 22 sampai 25).

 

Jika kita gabungkan secara keseluruhan, maka tampilan kodingnya akan jadi seperti ini.

Beginilah hasilnya jika dijalankan di browser saat text link disentuh oleh kursor yang digerakkan oleh mouse. Dan apabila mouse digerakkan menjauhi text luink, maka akan kembali jadi warna orange.

 

 

Adapun keterangan dari koding tambahan tadi adalah sebagai berikut:

 

No Script Kode Baris Fungsi
1 a:hover 22 Sebagai lanjutan dari script untuk text link pada sebelumnya, yaitu a{}. Akan tetapi, disini ada tambahan :hover, yang mana fungsi tersebut berguna saat mouse diarahkan pada text link dan text linknya akan berubah.
2 background-color: yellow; 24 Merubah warna backround pada text link menjadi berwarna kuning, karena kita gunakan yellow sebagai backgroundnya.

 

Dan Alhamdulillah untuk tutorial kali ini sampai disini dulu. Kita bisa menambahkan juga dengan script kode css lainnya untuk menambahkan kreatifitas kita masing-masing. Jadi, mohon maaf jika ada kekurangan pada artikel tutorial kali ini. Insya Allah akan siap tutorial selanjutnya. Demikian dan terima kasih.

Wassalamualaikum Wr. Wb.