Pengaturan Hyperlink Dan Tombol Yang Menarik Dalam CSS



1.    Pengertian


1.1    Hyperlink


Hyperlink adalah link yang dapat mengalihkan halaman webpada saat sebuah link di klik, biasanya digunakan untuk menu navigasi pada pembuatan web yang akan mengarahkan seseorang ke tempat yang diinginkan.

Seperti yang kita ketahui bersama-sama bahwa element-element pada link dapat diberikan style dengan berbagai property pada CSS, seperti: color,style, font-size, display, text-decoration,size font, dll, hingga dapat membuat link yang kita buat seolah olah merupakan sebuah tombol (button), disamping itu kalian juga dapat boleh memberikan style sesuai keingin hanya dengan menggunakan salah satu dari 4 status link yang akan dikenali langsung oleh CSS, 4 status, status yang dimaksud adalah class link, link visited, link hover, dan juga link active.

a)    Class :link

Mungkin teman teman akan bertanya mengapa ada :link? bukankah element a otomatis merupakan link?, jawabannya yaitu mengacu pada Spesifikasi CSS bahwa :link disini mengacu pada semua element HTML yang mempunyai attribut href,  yaitu element <a>, <area>, dan <link> – yang terfapat pada header untuk stylesheet, namun dari ketiganya hal itu, hanya element <a> yang dapat di berikan style style, sehingga :link{} atau a:link{} sama dengan a[href]{} (merupakan element a yang memiliki attribute href, dengan nilai apapun) atau cukup a{}.

b)    Class :visited

Class :visited digunakan pada saat user/pengunjung telah mengunjungi url/link tersebut, hal ini dimaksudkan untuk mempermudah user untuk membedakan link yang telah dikunjungi oleh seseorang (di click) dan yang belum dikunjungi. Beberapa property yang dapat kalian manfaatkan untuk memberikan style sesuai keinginan pada class visited, yaitu:

•    color

•    background-color

•    border-color (dan sub properties nya)

•    outline-color

•    Warna  dan juga stroke.

Properties pada class ini dapat bekerja sesuai dengan fungsinya apabila sebelumnya kalian telah didefinisikan pada class :link, misalnya saja: kita ingin merubah warna link yang telah kita kunjungi menjadi warna warna yang kita inginkan dengan menuliskan properties color: red/lainnya pada  class :visited, warna link tersebut dapat berubah jika pada class :link juga telah didefinisikan properties color nya.

c)    Class :hover

Class :hover akan aktif pada saat mouse berada diatas element. Jadi pada saat kursor kalian berada tepat diatas element yang dibuat maka akan akan terjadi event sesuai dengan property-property yang kalian gunakan untuk class:hover.

d)    Class :active

Class :active digunakan ketika link di klik dan mouse pada posisi ditekan (belum dilepas), dan biasanya hanya terlihat sepintas.

1.2    Tombol Yang Menarik

Pastinya teman-teman kadang melihat tombol atau button di WEB. Benar bukan? Button tersebut dibuat dengan desain yang memberikan pengalaman terbaik kepada pengunjung, memiliki efek kedalaman tertentu, dan bertujuan untuk mengarahkan visitor mengunjungi link tertentu. Hal ini dilakukan agar tombol pada halaman web kita akan terasa elegant atau indah yang membuat web kita menarik yang dapat memanjakan mata dari pengunjung.

Membuat button atau tombol dengan CSS cukup dengan membuat elemen <div> tersendiri, lalu memberikan perintah CSS yang memerintahkan elemen <div> tersebut berlaku sebagai tombol. Ditambah dengan property yang kalian gunakan.

2.    Algoritma

2.1    Pengaturan Hyperlink

    Memberi Perintah CSS

Pada sub bagin pemberian perintah css untuk membuat/ memberikan css pada link. Bentuk umumnya yang biasa kita lihat yaitu :


selector {property : value}


<style type="text/css">

                    a:link {    // untuk pendeklarasian class link

               color: red;

                   }

                 a:visited {    // untuk pendeklarasian class visited

                           color: yellow;

                    }

                    a:hover {    // untuk pendeklarasian class hover

                        color: blue;

                   }

                    a:active {    // untuk pendeklarasian class active

                        color: black;

                    }


-  Mendeklarasikan css pada tag <body>



Dalam memberikan link pada tombol, kita harus membuat perintah a href pada kode HTML yang meliputi keseluruhan elemen tombol tersebut. Sehingga seakan-akan nampak jelas conclusi nhya

Berikut contohnya:


<h1><a href="tdw tugas.html">Ini adalah contoh link</a></h1>


Dengan beberapa langkah diatas, maka seluruh elemen tersebut yang terdapat di dalamnya akan memiliki kemampuan untuk menjadi link. Sehingga elemen tombol sudah berfungsi sebagaimana tombol yang biasa gunakan pada umumnya.

2.2    Membuat tombol menarik

-   Memberi Perintah CSS

Pada pemberian perintah CSS untuk membentuk desain button / tombol yang bagus kita harus mendahulukan adanya operator padding pada tombol tersebut, dan memberikan perintah operator background warna agar entitas tombol dapat terlihat lebih dulu dsb.

<style type="text/css">

      .button{   

          width : 300px;             

          margin : 40px;           

          padding : 20px;                

          box-shadow : 1px 1px 2px #8899a9;  // teks bayangan

          border-radius : 100%;             // kelengkungan border

          text-align : center;         

           transition : .3s;   // waktu transisi

      }

      .tombol1{

          background-color : rgba(28, 114, 44, 0.3);

      }

      .tombol1:hover{

          background-color : red

      }

      a{

       text-decoration: none ;   // teks decoration dengan value none mendadakan dekorasi                dihilangkan
       color: black;
      }

-   Mendeklarasikan tombol pada tag <body>


Dalam memberikan link kita harus membuat perintah a href pada kode HTML yang meliputi keseluruhan elemen tombol tersebut. Berikut contohnya:

<a href="tdw pert_7.html" class="button tombol1">Tombol 1</a>


Itulah tadi pengantar pejaran dari saya kepada pengaturan hyperlink dan tombol yang menarik dalam CSS, serta contoh program yang dapat kalian terapkan dan pelajari. Perlu untuk digaris bawahi adala. hal itu boleh kalian kembangkan dan atur sesuai keinginan dan kemampuan kalian. Kalian semua hanya perlu untuk memahami konsep dasar dari hyperlink dan membuat tombol. yang sangat menarik perhatian. Sisanya yaitu mengatur property dan value dari setiap perintah sesuai keinginan anda.


Subscribe to receive free email updates:

0 Response to "Pengaturan Hyperlink Dan Tombol Yang Menarik Dalam CSS"

Post a Comment