Design Button itu sangat Mudah

Button sangatlah tidak asing bagi sebuah website, biasanya setiap ada form seperti log in, atau pun register pasti mempunyai button, kecantikan sebuah button juga sangat diperhatikan seoarang user. Apakah button anda sudah terlihat awesome? Jika sudah great, jika belum mari kita lihat bagaimana cara membuatnya menjadi indah dipandang mata dengan teknik yang sangat - sangat singkat.

Inilah adalah preview gambar button yang ingin kita buat.

Sebelum kita ke code, saya mohon anda persiapkan terlebih dahulu untuk membuat 2 file yi index.html dan button.css. Nah jika sudah maka anda bisa lihat markup dibawah.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pure button & Teknik</title>
    <link rel="stylesheet" href="button.css">
</head>
<body>
    <a href="register" class="button success">Register</a>
    <input type="submit" value="Log in" class="button success">
    <button type="submit" class="button danger">Danger</button>
</body>
</html>

Sengaja saya gunakan 3 element disana agar anda benar benar yakin jika style itu memang bisa digunakan dimana saja. Sebelum kita ke stylesheetnya, kita bahas dulu, kenapa class mempunyai 2 nama class, nah itu karna pada class button disana kita hanya fokus untuk penataan besar, size, dan sgb, sedangkan class kedua seperti yang anda lihat, success or error. Nah disana kita hanya akan setting seperti warna background atau forground nya.

body {
    padding: 50px;
    text-align: center;
}

.button {
    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: rgba(0,0,0,.4);
    color: #f9f9f9;
    border: none;
    padding: 10px 14px;
    border-radius: 3px;
    text-decoration: none;
}

.button.success {background-color: #14e25d; }
.button.success:hover {background-color: #2bd467; }

.button.danger {background-color: #ec3333; }
.button.danger:hover {background-color: #aa0000; }

Nah perhatikan pada class button saya tidak menambahkan

cursor: pointer;

Itu sengaja, karna button yang sebenarnya itu tidak mempunyai property pointer, itulah sebenarnya pembeda antara button dan link anchor. Nah jadi jika anda yang telah menggunakan button ttp dengan membuat cursor pointer, itu adalah hal yang salah, anda buat button tanpa style apa - apa, coba anda hover mouse anda, pasti default button tersebut tidak pernah yang pointer. Itu karna button memang tidak untuk itu. Tetapi link (anchor tag) punya properti ini. Mungkin sekian dari tutorial. Saya sangat beruntung hari ini jika anda mendapatkan ilmu dari arikel ini. Trimakasih telah membaca.



Generic placeholder image
By Irsyad A. Panjaitan
I am error

Comments

Please login to leave a comment!