Berkicau Sesuka Hati

Mempercantik Button dengan CSS

Dipos oleh JC 2 Komentar Print

Kemarin, sewaktu lagi desain form ternyata kusadari tombol submit kok kelihatan ngga matching ama formnya yang aduhai icon biggrin Mempercantik Button dengan CSS Langsung deh browsing mencari jurus-jurus untuk mengubahnya. Setelah berguru kilat, langsung diaplikasikan dengan jurus CSS nan tokcer ^.^

Seperti yang kita tahu, input button terlihat jelek di Firefox, sedikit bermasalah di Internet Explorer atau sama sekali tidak fleksibel di Safari. Solusinya biar tetap konsisten di semua browser, biasa sih menggunakan gambar sebagai tombol dan tentu saja repot karena harus buka Photoshop dan desain sendiri lagi tiap butuh tombol baru. Apa yang kita butuhkan adalah sesuatu yang lebih mudah dan fleksibel. Untunglah HTML menyediakan tag <button> yang lebih fleksibel daripada tag <input>, dimana tag <button> bisa disisipkan gambar.

Rupa tombol submit standar di tiga browser utama:
inputsubmit Mempercantik Button dengan CSS

Kita akan membuat tombolnya menjadi seperti ini:
css button2 Mempercantik Button dengan CSS

Mari kita mulai bekerja:

  1. Buat sebuah form. Kebetulan kemarin saya uda ada sebuah jquery form. Cek disini untuk cara buatnya
  2. Percantik formnya dengan sedikit taburan CSS (file form_style.css)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    p.header {
            font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
            font-size: 14px;
            margin-top: .5em;
            color: #ccc;
            text-transform:capitalize;
    }

    p.header span{
            font: bold 34px "Century Schoolbook", Georgia, Times, serif;
            color: #999;
            margin: .2em 0 .4em 0;
            letter-spacing: -2px;
    }

    .form-field{
        float:left;
        margin-bottom:8px;
        border:2px solid #CCC;
        padding:5px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;
        width:300px;
    }
       
    .form-holder{
        width:310px;
        height:180px;
        -moz-border-radius: 2em 0;
        border-radius: 2em 0;
        border: thin solid #CCC;
        padding: 2em 2em;
        background-color:#F7F7F7;
    }
  3. Download png icon sebagai pemanis disini
  4. Buat sebuah file CSS untuk mempercantik button dengan rules seperti dibawah ini.(file button_style.css)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    /* BUTTONS */

    .buttons a, .buttons button{
        display:block;
        float:left;
        margin:0 7px 0 0;
        background-color:#f5f5f5;
        border:1px solid #dedede;
        border-top:1px solid #eee;
        border-left:1px solid #eee;

        font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
        font-size:100%;
        line-height:130%;
        text-decoration:none;
        font-weight:bold;
        color:#565656;
        cursor:pointer;
        padding:5px 10px 6px 7px; /* Links */
        border-radius:1em;
        -moz-border-radius:1em;
    }
    .buttons button{
        width:auto;
        overflow:visible;
        padding:4px 10px 3px 7px; /* IE6 */
    }
    .buttons button[type]{
        padding:5px 10px 5px 7px; /* Firefox */
        line-height:17px; /* Safari */
    }
    *:first-child+html button[type]{
        padding:4px 10px 3px 7px; /* IE7 */
    }
    .buttons button img, .buttons a img{
        margin:0 3px -3px 0 !important;
        padding:0;
        border:none;
        width:16px;
        height:16px;
    }

    /* STANDARD */

    button:hover, .buttons a:hover{
        background-color:#dff4ff;
        border:1px solid #c2e1ef;
        color:#336699;
    }
    .buttons a:active{
        background-color:#6299c5;
        border:1px solid #6299c5;
        color:#fff;
    }

    /* POSITIVE */

    button.positive, .buttons a.positive{
        color:#529214;
    }
    .buttons a.positive:hover, button.positive:hover{
        background-color:#E6EFC2;
        border:1px solid #C6D880;
        color:#529214;
    }
    .buttons a.positive:active{
        background-color:#529214;
        border:1px solid #529214;
        color:#fff;
    }

    /* NEGATIVE */

    .buttons a.negative, button.negative{
        color:#d12f19;
    }
    .buttons a.negative:hover, button.negative:hover{
        background:#fbe3e4;
        border:1px solid #fbc2c4;
        color:#d12f19;
    }
    .buttons a.negative:active{
        background-color:#d12f19;
        border:1px solid #d12f19;
        color:#fff;
    }
  5. Aplikasikan class CSS ke setiap button. Contohnya:
    1
    2
    3
    4
    <div class="buttons">
        <button type="submit" class="positive"><img src="true.png" />Save</button>
        <button type="button" class="negative"><img src="false.png" />Cancel</button>
    </div>
  6. Hasilnya kira-kira seperti ini:
    css button Mempercantik Button dengan CSS

LIHAT DEMO | DOWNLOAD SOURCE CODE

Penulis: JC @G2.com

Author

JC


Co-Founder of G2.com, a freelancer, a learner, a rebel, a child, and a bad earner. like to learn and watch, rarely think which makes me do stupid things, speak when needed, lie when necessary...



Artikel lain sejenis:

Artikel lain dari penulis ini:

rss Langganan pada penulis ini (Free!)


Topik terkait: , ,
Share artikel ini? Mudah banget, tinggal copy kode di bawah ini
URI
Link
Forum

Komentar

Trackbacks

There are no trackbacks



 
KomentarTerbaru
FanPage
G2Staff