Membuat Button Dengan CSS Pseudo Elemen V1

Membuat Button Dengan CSS Pseudo Elemen V1 | Hari sedikit membosankan, apalagi masalah yang ada di template yang belum selesai. Tapi untungnya masih sempet juga berkreasi bersama Dreamweaver tercinta. Pseudo Elemen, bisa anda baca lebih lengkapnya di W3.org. Karena disana semua perngertian masalah pemrograman disediakan.

Pseudo Element dalam CSS bisa diartikan sebagai Elemen/Tag “palsu”. Karena dengan menambahkan pseudo elemen seolah olah kita menambahkan elemen atau suatu tag baru di dalam tag yang kita beri style.

Ada sedikit perubahan dalam spesifikasi CSS3, yakni setiap pseudo element harus menggunakan double colon atau titik duanya ditulis dua kali seperti ::before ,::after. (Sumber:http://www.w3.org/TR/selectors/#pseudo-elements)

CSS

.button {
    background-color:#3bb3e0;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)));
    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    -o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.button::before {
    background-color:#072239;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    top:5px;
    z-index:-1;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 1px 0px #fff;
    -moz-box-shadow: 0px 1px 0px #fff;
    -o-box-shadow: 0px 1px 0px #fff;
    box-shadow: 0px 1px 0px #fff;
}

.button:active {
    color:#156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background:rgb(44,160,202);
    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    top:7px;
}

.button:active::before {
    top:-2px;
}

HTML

<a href="#" class="button"> Click me!</a>

ILUSTRASI