BonBon, Sweet CSS3 (Candy) Buttons

Screenshot

Kangen ngeblog...

Kali ini aku akan mencoba sharing masih seputar web design. Kali ini kita akan mencoba membuat button cantik dengan CSS3. Button yang dibuat oleh simurai ini dinamakan "Bonbon" (dalam bahasa perancis) atau "Candy" (permen )

Yang berikut inilah yang akan kita coba buat :

Button King Queen Horse Flower

Tab1 Tab2

Mantap bukan...
Nah, contoh diatas hanya dapat dilihat menggunakan browser yang telah mendukung CSS3, bagi browser yang belum support CSS3 (browser lama) maka dapat melihat screenshot diatas.

Kita langsung saja ke tutorialnya.

untuk membuat button/tombol seperti tadi, kita menggunakan script berikut untuk pemanggilannya :

<a href="" class="button">Button</a>

Selanjutnya masukkan script css tersebut :

/* -------------- THE button -------------- */ .button { /* text */ text-decoration: none; font: 24px/1em 'Droid Sans', sans-serif; font-weight: bold; text-shadow: rgba(255,255,255,.5) 0 1px 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; /* layout */ padding: .5em .6em .4em .6em; margin: .5em; display: inline-block; position: relative; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color: hsl(0, 0%, 40%) !important; background-color: hsl(0, 0%, 75%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ }

disini kita juga membutuhkan google font API agar button yang kita buat lebih menarik, maka masukkan juga script berikut ini kedalamnya :

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster); @import url(http://fonts.googleapis.com/css?family=Lobster); @import url(pictos/pictos.css);

Masukkan juga script css berikut kedalamnya agar efek button terlihan lebih menarik :

/* effects */ border-top: 1px solid rgba(255,255,255,0.8); border-bottom: 1px solid rgba(0,0,0,0.1); background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); -webkit-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; transition: background .2s ease-in-out;

Untuk memberikan kesan lebih nyata, kita akan memberikan efek hover, active dan sebagainya layaknya button pada umumnya. Jadi masukkan script css berikut :

.button:hover { background-color: hsl(0, 0%, 83%); } .button:active { background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, rgba(0,0,0,0.4) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; -moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, rgba(0,0,0,0.4) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, rgba(0,0,0,0.4) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; -webkit-transform: translateY(.2em); -moz-transform: translateY(.2em); transform: translateY(.2em); } .button:focus { outline: none; color: rgba(254,255,255,0.9) !important; text-shadow: rgba(0,0,0,0.2) 0 1px 2px; }

Jadi keseluruhan script yang kita dapatkan hingga tahapan ini adalah sebagai berikut :

<style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster); @import url(http://fonts.googleapis.com/css?family=Lobster); @import url(pictos/pictos.css); /* -------------- THE button -------------- */ .button { /* text */ text-decoration: none; font: 24px/1em 'Droid Sans', sans-serif; font-weight: bold; text-shadow: rgba(255,255,255,.5) 0 1px 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; /* layout */ padding: .5em .6em .4em .6em; margin: .5em; display: inline-block; position: relative; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color: hsl(0, 0%, 40%) !important; background-color: hsl(0, 0%, 75%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ /* effects */ border-top: 1px solid rgba(255,255,255,0.8); border-bottom: 1px solid rgba(0,0,0,0.1); background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); -webkit-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; transition: background .2s ease-in-out; } </style>

dan seperti inilah button yang kita buat tadi :

Button

Lantas bagaimana cara membuat button yang berwarna seperti pada contoh diatas tadi...???

Untuk membuatnya kita masih memerlukan beberapa script CSS lagi. Nah, agar tombol yang kita buat ini mudah untuk diakses, kita bisa menambahkan role="button". Gunakan juga fungsi tabindex agar tombol yang kita buat setelah di "klik" tetap tersorot. Jika kita menggunakan tag <button>, kita bisa menggunakan atribut seperti disabled. Jadi pemanggilannya menggunakan tag HTML sebagai berikut :

<a href="#" role="button" tabindex="1" class="button green">Tab1</a> <a href="#" role="button" tabindex="2" class="button green">Tab2</a> <button disabled class="button green glossy">Disabled</button>

Selanjutnya adalah masukkan script CSS berikut ini untuk memberikan efek warna :

.button.green { color: hsl(88, 70%, 30%) !important; background-color: hsl(88, 70%, 60%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ } .button.green:hover { background-color: hsl(88, 70%, 75%); }

Untuk menggunakan tag <button> berikut CSS yang digunakan :

/* -------------- button (tag) -------------- */ button.button { border-left: none; border-right: none; } button.button:hover { cursor: pointer; }

Nah, untuk tombol/button yang di "disabled" kita membutuhkan CSS berikut ini :

.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover { opacity: .5; cursor: default; color: rgba(0,0,0,0.2) !important; text-shadow: none !important; background-color: rgba(0,0,0,0.05); background-image: none; border-top: none; -webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, rgba(0,0,0,0.3) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; -moz-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, rgba(0,0,0,0.3) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, rgba(0,0,0,0.3) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; -webkit-transform: translateY(5px); -moz-transform: translateY(5px); transform: translateY(5px); }

Untuk memberikan efek glosy berikut CSS-nya :

.button.glossy:after { content: ""; position: absolute; width: 90%; height: 60%; top: 0; left: 5%; -webkit-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; -moz-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; background-image: -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); background-image: -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) ); background-image: gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); } .button.glossy:active:after, .button.disabled:after, .button[disabled]:after { opacity: .6; } .button.icon.glossy:after { height: 75% ; }

Jadi sampai saat ini, inilah CSS yang telah kita pakai :

<style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster); @import url(http://fonts.googleapis.com/css?family=Lobster); @import url(pictos/pictos.css); /* -------------- THE button -------------- */ .button { /* text */ text-decoration: none; font: 24px/1em 'Droid Sans', sans-serif; font-weight: bold; text-shadow: rgba(255,255,255,.5) 0 1px 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; /* layout */ padding: .5em .6em .4em .6em; margin: .5em; display: inline-block; position: relative; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; /* color */ color: hsl(0, 0%, 40%) !important; background-color: hsl(0, 0%, 75%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ /* effects */ border-top: 1px solid rgba(255,255,255,0.8); border-bottom: 1px solid rgba(0,0,0,0.1); background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); -webkit-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; transition: background .2s ease-in-out; } /* -------------- button (tag) -------------- */ button.button { border-left: none; border-right: none; } button.button:hover { cursor: pointer; } .button.green { color: hsl(88, 70%, 30%) !important; background-color: hsl(88, 70%, 60%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ } .button.green:hover { background-color: hsl(88, 70%, 75%); } /* -------------- States -------------- */ .button:hover { background-color: hsl(0, 0%, 83%); } .button:active { background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, rgba(0,0,0,0.4) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; -moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, rgba(0,0,0,0.4) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, rgba(0,0,0,0.4) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; -webkit-transform: translateY(.2em); -moz-transform: translateY(.2em); transform: translateY(.2em); } .button:focus { outline: none; color: rgba(254,255,255,0.9) !important; text-shadow: rgba(0,0,0,0.2) 0 1px 2px; } .button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover { opacity: .5; cursor: default; color: rgba(0,0,0,0.2) !important; text-shadow: none !important; background-color: rgba(0,0,0,0.05); background-image: none; border-top: none; -webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, rgba(0,0,0,0.3) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; -moz-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, rgba(0,0,0,0.3) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, rgba(0,0,0,0.3) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px; -webkit-transform: translateY(5px); -moz-transform: translateY(5px); transform: translateY(5px); } .button.glossy:after { content: ""; position: absolute; width: 90%; height: 60%; top: 0; left: 5%; -webkit-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; -moz-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; background-image: -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); background-image: -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) ); background-image: gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); } .button.glossy:active:after, .button.disabled:after, .button[disabled]:after { opacity: .6; } .button.icon.glossy:after { height: 75% ; } </style>

Dan inilah yang kita dapatkan :

Tab1 Tab2

cuma itu saja kah...???

sayangnya tidak, masih ada yang lebih keren lagi...
berikut langkah kangkahnya...

untuk pemanggilannya, menggunakan tag html berikut :

<a href="#" class="button orange shield glossy">King</a> <a href="#" class="button pink serif round glass">Queen</a> <a href="#" class="button blue skew">Horse</a> <a href="#" class="button green icon">Flower</a>

Untuk penggunaan Icon "♚" pada tombol button seperti pada contoh berikut,

King

kita membutuhkan atribut HTML 5 seperti data-icon="♚". Hal ini memungkinkan kita untuk menggunakan salah satu simbol Unicode atau icon font yang baru dirilis seperti Pictos atau Writesocial. Dengan CSS berikut .button:before { content: attr(data-icon); } maka icon akan ditambahkan di depan label/text.

Jadi dengan demikian untuk pemanggilan button dengan menggunakan icon adalah menjadi sebagai berikut :

<a href="#" data-icon="♚" class="button orange shield glossy">King</a> <a href="#" data-icon="♛" class="button pink serif round glass">Queen</a> <a href="#" data-icon="♞" class="button blue skew">Horse</a> <a href="#" data-icon="❀" class="button green icon">Flower</a>

Untuk pengaturan icon, kita gunakan script CSS berikut :

/* -------------- icon -------------- */ .button:before { font: 1.2em/0 'Pictos', sans-serif; content: attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */ margin-right: 0.4em; } /* icon only */ .icon { font-weight: normal; font-style: normal; text-indent: -999em; } .icon:before { margin-right: 0; display: block; height: 0; text-indent: 0px; }

Kemudian untuk kebutuhan warna kita gunakan script CSS berikut :

/* -------------- colours -------------- */ .button.orange { color: hsl(39, 100%, 30%) !important; background-color: hsl(39, 100%, 50%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; } .button.orange:hover { background-color: hsl(39, 100%, 65%); } .button.blue { color: hsl(208, 50%, 40%) !important; background-color: hsl(208, 100%, 75%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; } .button.blue:hover { background-color: hsl(208, 100%, 83%); } .button.green { color: hsl(88, 70%, 30%) !important; background-color: hsl(88, 70%, 60%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; } .button.green:hover { background-color: hsl(88, 70%, 75%); } .button.pink { color: hsl(340, 100%, 30%) !important; background-color: hsl(340, 100%, 75%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px; } .button.pink:hover { background-color: hsl(340, 100%, 83%); } .button.transparent { color: rgba(0,0,0,0.5) !important; } .button.transparent, .button.transparent:hover, .button.transparent:active { background-color: transparent; background-image: none; } .button.transparent:hover { opacity: .9; }

Untuk pengaturan font kita gunakan CSS berikut :

/* -------------- Fonts -------------- */ .serif { font-family: 'Lobster', serif; font-weight: normal; } /* -------------- Sizes -------------- */ .xs { font-size: 16px; } .xl { font-size: 32px; }

Untuk efek efek seperti bentuk bentuk yang berbeda beda, efek glosy maupun efek glass kita gunakan CSS berikut ini :

/* -------------- Materials -------------- */ .button.glossy:after, .button.glass:after { content: ""; position: absolute; width: 90%; height: 60%; top: 0; left: 5%; -webkit-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; -moz-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; background-image: -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); background-image: -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) ); background-image: gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); } .button.glossy:active:after, .button.glass:active:after, .button.disabled:after, .button[disabled]:after { opacity: .6; } .button.icon.glossy:after, .button.icon.glass:after { height: 75% ; } /* -------------- Glass + Transparent -------------- */ .button.glass { text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em; } .button.glass:active { text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em; } /* -------------- Shapes -------------- */ /* round */ .round, .round.glossy:after, .round.glass:after { border-top: none; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; } /* oval */ .oval { border-top: none; padding-left: .8em; padding-right: .8em; -webkit-border-radius: 5em / 2em; -moz-border-radius: 5em / 2em; border-radius: 5em / 2em; } .oval.glossy:after, .oval.glass:after { top: 5%; -webkit-border-radius: 5em / 2em 2em 1em 1em; -moz-border-radius: 5em / 2em 2em 1em 1em; border-radius: 5em / 2em 2em 1em 1em; } .oval.icon { padding-left: .8em; padding-right: .8em; -webkit-border-radius: 1.5em / 1em; -moz-border-radius: 1.5em / 1em; border-radius: 1.5em / 1em; } .oval.icon.glossy:after, .oval.icon.glass:after { -webkit-border-radius: 1.5em / 1em; -moz-border-radius: 1.5em / 1em; border-radius: 1.5em / 1em; } /* brackets */ .brackets, .brackets.glossy:after, .brackets.glass:after { border-top: none; -webkit-border-radius: .5em / 1em; -moz-border-radius: .5em / 1em; border-radius: .5em / 1em; } /* skew */ .skew { border-top: none; padding-right: 1.2em; padding-left: 0.8em; -webkit-border-radius: 5em 1em / 5em 1em; -moz-border-radius: 5em 1em / 5em 1em; border-radius: 5em 1em / 5em 1em; } .skew.glossy:after, .skew.glass:after { left: 10%; -webkit-border-radius: 7em 1em / 5em 1em; -moz-border-radius: 7em 1em / 5em 1em; border-radius: 7em 1em / 5em 1em; } .skew.icon { padding-right: .9em; padding-left: .8em; } /* back */ .back, .back.glossy:after, .back.glass:after { border-top-color: rgba(255,255,255,0.5); -webkit-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; -moz-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; } .back.glossy:after, .back.glass:after { left: 6%; width: 88%; } /* knife */ .knife { padding-left: 1.5em; -webkit-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; -moz-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; } .knife.glossy:after, .knife.glass:after { left: 3%; width: 97%; -webkit-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; -moz-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; } .knife.glossy.icon:after, .knife.glass.icon:after { left: 5%; width: 95%; -webkit-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; -moz-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; } /* shield */ .shield, .shield.glossy:after, .shield.glass:after { -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; } .shield { padding-left: .8em; padding-right: .8em; } .shield.icon { padding-left: .6em; padding-right: .6em; } /* drop */ .drop { border-top: none; -webkit-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; -moz-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; } .drop.glossy:after, .drop.glass:after { left: 4%; -webkit-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; -moz-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; } .drop.icon { padding-right: .6em; } /* morph */ .morph { border-top: none; -webkit-border-radius: 5em / 2em; -moz-border-radius: 5em / 2em; border-radius: 5em / 2em; -webkit-transition: -webkit-border-radius .3s ease-in-out; -moz-transition: -moz-border-radius .3s ease-in-out; transition: -moz-border-radius .3s ease-in-out; } .morph:hover { -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; } .morph:active { -webkit-border-radius: .3em; -moz-border-radius: .3em; border-radius: .3em; } .morph:after { display: none; }

Dengan demikian tombol/button yang kita buat tadi akan menjadi seperti berikut ini :

King Queen Horse Flower

Gimana...???
keren keren bukan...???

Walaupun 100% menggunakan CSS bukan berarti dalam button yang kita buat ini tanpa kendala, karena browser yang kita gunakan untuk menampilkan tombol/button ini harus support dengan CSS3.
Tapi tak perlu khawatir, karena sebagian besar browser saat ini (browser dengan versi terbaru) telah mendukung/support dengan CSS3.

Sedikit tambahan saja, agar terlihat lebih sempurna dalam menampilkan button ini kita perlu sedikit tambahan CSS untuk browser firefox. Berikut script CSS nya :

/* Some ugly hacks for FF. Thanks to David Hund for some help - http://valuedstandards.com/static/test/buttons/ */ @-moz-document url-prefix() { .button { text-align: center; } .icon { padding: .5em 1em; } .icon:before { margin-left: -.42em; float: left; } .drop.icon { padding-right: 1.1em; } .shield.icon { padding-left: 1.1em; padding-right: 1.1em; } .skew.icon { padding-right: 1.4em; padding-left: 1.3em; } .oval.icon { padding-left: 1.3em; padding-right: 1.3em; } .knife { padding-left: 2em; } }

Jadi, kalau kita gabungkan semua CSS tadi menjadi satu, maka akan tampak sebagai berikut :

<style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster); @import url(http://fonts.googleapis.com/css?family=Lobster); @import url(pictos/pictos.css); /* -------------- THE button -------------- */ .button { /* text */ text-decoration: none; font: 24px/1em 'Droid Sans', sans-serif; font-weight: bold; text-shadow: rgba(255,255,255,.5) 0 1px 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; /* layout */ padding: .5em .6em .4em .6em; margin: .5em; display: inline-block; position: relative; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; /* effects */ border-top: 1px solid rgba(255,255,255,0.8); border-bottom: 1px solid rgba(0,0,0,0.1); background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); -webkit-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; transition: background .2s ease-in-out; /* color */ color: hsl(0, 0%, 40%) !important; background-color: hsl(0, 0%, 75%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ } /* -------------- button (tag) -------------- */ button.button { border-left: none; border-right: none; } button.button:hover { cursor: pointer; } /* -------------- icon -------------- */ .button:before { font: 1.2em/0 'Pictos', sans-serif; content: attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */ margin-right: 0.4em; } /* icon only */ .icon { font-weight: normal; font-style: normal; text-indent: -999em; } .icon:before { margin-right: 0; display: block; height: 0; text-indent: 0px; } /* -------------- colours -------------- */ .button.orange { color: hsl(39, 100%, 30%) !important; background-color: hsl(39, 100%, 50%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ } .button.orange:hover { background-color: hsl(39, 100%, 65%); } .button.blue { color: hsl(208, 50%, 40%) !important; background-color: hsl(208, 100%, 75%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ } .button.blue:hover { background-color: hsl(208, 100%, 83%); } .button.green { color: hsl(88, 70%, 30%) !important; background-color: hsl(88, 70%, 60%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ } .button.green:hover { background-color: hsl(88, 70%, 75%); } .button.pink { color: hsl(340, 100%, 30%) !important; background-color: hsl(340, 100%, 75%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ } .button.pink:hover { background-color: hsl(340, 100%, 83%); } .button.transparent { color: rgba(0,0,0,0.5) !important; } .button.transparent, .button.transparent:hover, .button.transparent:active { background-color: transparent; background-image: none; } .button.transparent:hover { opacity: .9; } /* -------------- States -------------- */ .button:hover { background-color: hsl(0, 0%, 83%); } .button:active { background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCtk19SNK-OZpCSNQf9kOhxebq4uZEFbArubupZGOYYCH3s2_0QY3B1CJ45vQLnwo-ivSJOIuz4rxwgBvrAoi9tGZwbPy1aKuttJeGtq6BLtmc2rbfH50G_1o8FV_T35cwDgtugbofA1A/); -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ -moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ -webkit-transform: translateY(.2em); -moz-transform: translateY(.2em); transform: translateY(.2em); } .button:focus { outline: none; color: rgba(254,255,255,0.9) !important; text-shadow: rgba(0,0,0,0.2) 0 1px 2px; } .button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover { opacity: .5; cursor: default; color: rgba(0,0,0,0.2) !important; text-shadow: none !important; background-color: rgba(0,0,0,0.05); background-image: none; border-top: none; -webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ -webkit-transform: translateY(5px); -moz-transform: translateY(5px); transform: translateY(5px); } /* -------------- Fonts -------------- */ .serif { font-family: 'Lobster', serif; font-weight: normal; } /* -------------- Sizes -------------- */ .xs { font-size: 16px; } .xl { font-size: 32px; } /* -------------- Materials -------------- */ .button.glossy:after, .button.glass:after { content: ""; position: absolute; width: 90%; height: 60%; top: 0; left: 5%; -webkit-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; -moz-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; background-image: -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); background-image: -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) ); background-image: gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); } .button.glossy:active:after, .button.glass:active:after, .button.disabled:after, .button[disabled]:after { opacity: .6; } .button.icon.glossy:after, .button.icon.glass:after { height: 75% ; } /* -------------- Glass + Transparent -------------- */ .button.glass { text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em; } .button.glass:active { text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em; } /* -------------- Shapes -------------- */ /* round */ .round, .round.glossy:after, .round.glass:after { border-top: none; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; } /* oval */ .oval { border-top: none; padding-left: .8em; padding-right: .8em; -webkit-border-radius: 5em / 2em; -moz-border-radius: 5em / 2em; border-radius: 5em / 2em; } .oval.glossy:after, .oval.glass:after { top: 5%; -webkit-border-radius: 5em / 2em 2em 1em 1em; -moz-border-radius: 5em / 2em 2em 1em 1em; border-radius: 5em / 2em 2em 1em 1em; } .oval.icon { padding-left: .8em; padding-right: .8em; -webkit-border-radius: 1.5em / 1em; -moz-border-radius: 1.5em / 1em; border-radius: 1.5em / 1em; } .oval.icon.glossy:after, .oval.icon.glass:after { -webkit-border-radius: 1.5em / 1em; -moz-border-radius: 1.5em / 1em; border-radius: 1.5em / 1em; } /* brackets */ .brackets, .brackets.glossy:after, .brackets.glass:after { border-top: none; -webkit-border-radius: .5em / 1em; -moz-border-radius: .5em / 1em; border-radius: .5em / 1em; } /* skew */ .skew { border-top: none; padding-right: 1.2em; padding-left: 0.8em; -webkit-border-radius: 5em 1em / 5em 1em; -moz-border-radius: 5em 1em / 5em 1em; border-radius: 5em 1em / 5em 1em; } .skew.glossy:after, .skew.glass:after { left: 10%; -webkit-border-radius: 7em 1em / 5em 1em; -moz-border-radius: 7em 1em / 5em 1em; border-radius: 7em 1em / 5em 1em; } .skew.icon { padding-right: .9em; padding-left: .8em; } /* back */ .back, .back.glossy:after, .back.glass:after { border-top-color: rgba(255,255,255,0.5); -webkit-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; -moz-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; } .back.glossy:after, .back.glass:after { left: 6%; width: 88%; } /* knife */ .knife { padding-left: 1.5em; -webkit-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; -moz-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; } .knife.glossy:after, .knife.glass:after { left: 3%; width: 97%; -webkit-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; -moz-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; } .knife.glossy.icon:after, .knife.glass.icon:after { left: 5%; width: 95%; -webkit-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; -moz-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; } /* shield */ .shield, .shield.glossy:after, .shield.glass:after { -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; } .shield { padding-left: .8em; padding-right: .8em; } .shield.icon { padding-left: .6em; padding-right: .6em; } /* drop */ .drop { border-top: none; -webkit-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; -moz-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; } .drop.glossy:after, .drop.glass:after { left: 4%; -webkit-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; -moz-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; } .drop.icon { padding-right: .6em; } /* morph */ .morph { border-top: none; -webkit-border-radius: 5em / 2em; -moz-border-radius: 5em / 2em; border-radius: 5em / 2em; -webkit-transition: -webkit-border-radius .3s ease-in-out; -moz-transition: -moz-border-radius .3s ease-in-out; transition: -moz-border-radius .3s ease-in-out; } .morph:hover { -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; } .morph:active { -webkit-border-radius: .3em; -moz-border-radius: .3em; border-radius: .3em; } .morph:after { display: none; } /* Some ugly hacks for FF. Thanks to David Hund for some help - http://valuedstandards.com/static/test/buttons/ */ @-moz-document url-prefix() { .button { text-align: center; } .icon { padding: .5em 1em; } .icon:before { margin-left: -.42em; float: left; } .drop.icon { padding-right: 1.1em; } .shield.icon { padding-left: 1.1em; padding-right: 1.1em; } .skew.icon { padding-right: 1.4em; padding-left: 1.3em; } .oval.icon { padding-left: 1.3em; padding-right: 1.3em; } .knife { padding-left: 2em; } } </style>

Jadi, kalau tak mau ambil pusing harus pasang script CSS yang mana, tinggal copy script CSS diatas. Kalian juga bisa mendownload seluruh scriptnya disini, atau kunjungi websitenya di lab.simurai.com

Semoga bermanfaat


*.:｡✿ Don't forget to come back again ✿.｡.:*

Visit Wahyudi Blog !