Membuat Button Sederhana Dengan CSS Di Blog

Membuat Button Sederhana Dengan CSS Di Blog | Ada banyak bentuk dan macam button tergantung bumbu CSS yang kita buat. Button yang baik menurut saya, adalah yang simple dan mudah dibaca oleh reader. Tapi tidak adalah salahnya jika anda memakai button default yang sudah ada pada HTML.
Contoh tombol diatas adalah default. Lalu bagaimana kita membuat dengan CSS di Blog ?

Letakkan kode dibawah ini diatas  ]]></b:skin> :

.button{

    margin: 10px;

    padding: 1px 4px;            

    width: 130px;

    cursor: pointer;

    border: 1px solid #2493FF;

    overflow: visible;

    display: inline-block;

    color: #fff;

    font: bold 1.4em arial, helvetica;

    text-shadow: 0 -1px 0 rgba(0,0,0,.4);          

    background-color: #2493ff;

    background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); 

    transition: background-color .2s ease-out;

    border-radius: 3px;

    box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .5) inset;                                    

}



.button:hover{

      background-color: #7cbfff;

        border-color: #7cbfff;

}



.button:active{

    position: relative;

    top: 3px;

    text-shadow: none;

    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;}

Sedangkan untuk memanggilnya kita masukan ini di dalam artikel pada HTML :

<a class="button" href="URL" target="_blank" title="">Nama Tombol</a>

Nantinya akan seperti ini :

DEMO KLIK DISINI