Bosen melihat link seperti ini -> informatika ??? Disini kita akan membuat link tampil berbeda, dimana link akan kita sulap menjadi sebuah button hanya dengan menggunakan css! Di bawah ini adalah gambar sebuah link yang akan kita buat.

link-css

Pertama, kita buat dulu file html yang akan menampilkan link tersebut. File-nya kita beri nama index.html

<a href="#" class="link_button">Sign In</a>

 

Link yang akan kita sulap menjadi button adalah tag a yang memiliki class “link_button”. Sekarang kita buat file css-nya dan beri nama link.css

.link_button
{
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    padding: 20px;
    border : solid 1px #5DA951;
    background-color: #fff;
    color: #5DA951;

    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;

    box-shadow: 5px 5px 7px #5DA951;
    -moz-box-shadow: 5px 5px 7px #5DA951;
    -webkit-box-shadow: 5px 5px 7px #5DA951;
}

Mari kita perhatikan setiap barisnya.

text-decoration: none;
text-align: center;
font-size: 18px;

Pada code di atas di awal baris, kita menghilangkan garis bawah pada font link dengan menggunakan code “text-decoration”.
Baris kedua, kita buat text link berada ditengah content.
Baris ketiga, kita set ukuran font link 18px.
Tiga baris code di atas adalah code yang lumrah digunakan oleh sebuah link. Mari kita lihat code selanjutnya.

padding: 20px;
border : solid 1px #5DA951;
background-color: #fff;
color: #5DA951;

Baris pertama, kita buat ruang/jarak antara font link dengan content terdekat dengan link menggunakan “padding” dengan jarak 20px ke segala arah. Inilah yang membuat link berbeda seperti biasanya, dimana link memiliki ruang.

Baris kedua, kita buat border (garis) yang mengelilingi link dengan tipe solid (masih banyak tipenya) dengan ketebalan 1px dan berwarna #5DA951. Code ini membuat link terlihat seperti button, dimana font dikelilingi oleh garis ini.

Baris ketiga dan keempat, kita buat warna latar ruang disekitar font atau didalam garis dengan warna #fff, dan kita beri warna font dengan #5DA951..

Code selanjutnya, kita buat link tersebut lebih cantik dengan menumpulkan sudut-sudut dari garis link tersebut.

border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

box-shadow: 5px 5px 7px #5DA951;
-moz-box-shadow: 5px 5px 7px #5DA951;
-webkit-box-shadow: 5px 5px 7px #5DA951;

Untuk tiga baris pertama, kita gunakan “border-radius” yang melengkungkan semua sudut element, dengan kelengkungan 15px. code dengan awalan “-moz-” dan “-webkit” adalah salah satu fitur baru dari CSS 3. Code ini menandakan hanya diperuntukan untuk browser mozilla dan yang ber-engine webkit seperti safari, google chrome.dll.

Untuk tiga baris terakhir, kita berikan effect shadow (bayangan) kepada link tersebut. Dimana 5px pertama adalah posisi x (horizontal), 5px berikutnya posisi y (vertical), 7px tingkat keremangan (blur), dan #5DA951 adalah warna dari bayangan tersebut.

Link button sudah kita buat. Agar lebih menarik, kita buat effect pada saat mouse over.

.link_button:hover
{
    box-shadow: -5px -5px 7px #5DA951;
    -moz-box-shadow: -5px -5px 7px #5DA951;
    -webkit-box-shadow: -5px -5px 7px #5DA951;;
}

Untuk penjelasannya sama seperti diatas. Untuk hasilnya? silahkan dicoba 🙂

Setelah selesai, kedua file kita letakkan dalam folder yang sama, lalu kita bisa buka di browser. Oh iya, jangan heran jika effect lengkungan dan bayangan link tidak ada pada browser IE, karena hanya browser IE-lah yang “egois” dengan CSS, intinya gak kompak dengan browser lain 😀

Semoga kita bisa bahas semua isi dan trik dari CSS, terutama CSS 3 yang semakin gaya dengan tampilan-tampilan barunya 🙂

Dan yang lebih penting, semoga artikel-artikel ini bermanfaat bagi pembaca 🙂