Cara Membuat Fancy Button Dengan Animasi Dan CSS3

CSS - Membuat tombol link dalam suatu website/blog sudah biasa, namun apa yang terjadi jika tombol tersebut dimodifikasi menjadi tombol yang keren dengan animasi dan bantuan CSS3. Pengunjung web/blog kamu pasti kagum dan pingin menirunya. Ini sangat cocok untuk web/blog yang mempunyai layanan download, jadi buatlah tombol downloadnya semenarik mungkin. Nama tombol keren ini adalah Fancy Button.

CSS Kode: (letakan di atas kode ]]></b:skin>)

.button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 75px;
    margin: 0 20px;
    text-decoration: none;
}
.green {
    border: solid 1px #3b7200;
    background-color: #88c72a;
}

.red {
    border: solid 1px #720000;
    background-color: #c72a2a;
}

.button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 75px;
    margin: 0 20px;
    text-shadow: 2px 2px 1px #595959;
    filter: dropshadow(color=#595959, offx=1, offy=1);
    text-decoration: none;
}

.square {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.rounded {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
.green {
    border: solid 1px #3b7200;
    background-color: #88c72a;
    background: -moz-linear-gradient(top, #88c72a 0%, #709e0e 100%);
    background: -webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%);
    background: -o-linear-gradient(top, #88c72a 0%, #709e0e 100%);
    background: -ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e0e', endColorstr='#709e0e',GradientType=0 );
    background: linear-gradient(top, #88c72a 0% ,#709e0e 100%);
    -webkit-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
    -moz-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
    box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
}

.red {
    border: solid 1px #720000;
    background-color: #c72a2a;
    background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 );
    background: linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
    -webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
    -moz-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
    box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
}
.green:hover {
    background-color: #7fb52f;
    background: -moz-linear-gradient(top, #7fb52f 0%, #67910b 100%);
    background: -webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%);
    background: -o-linear-gradient(top, #7fb52f 0%, #67910b 100%);
    background: -ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910b', endColorstr='#67910b',GradientType=0 );
    background: linear-gradient(top, #7fb52f 0% ,#67910b 100%);
}

.green:active {
    background-color: #638f22;
    background: -moz-linear-gradient(top, #638f22 0%, #486608 100%);
    background: -webkit-linear-gradient(top, #638f22 0%, #486608 100%);
    background: -o-linear-gradient(top, #638f22 0%, #486608 100%);
    background: -ms-linear-gradient(top, #638f22 0% ,#486608 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#486608', endColorstr='#486608',GradientType=0 );
    background: linear-gradient(top, #638f22 0% ,#486608 100%);
}

.red:hover {
    background-color: #b52f2f;
    background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 );
    background: linear-gradient(top, #b52f2f 0% ,#910b0b 100%);
}

.red:active {
    background-color: #8f2222;
    background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -o-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -ms-linear-gradient(top, #8f2222 0% ,#660808 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 );
    background: linear-gradient(top, #8f2222 0% ,#660808 100%);
}
.effect-2 {
    transition: border-radius 2s;
    -webkit-transition: border-radius 2s;
    -moz-transition: border-radius 2s;
    -o-transition: border-radius 2s;
    -ms-transition: border-radius 2s;
}

.effect-2:hover {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.effect-3 {
    transition: border-radius 1s;
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
}

.effect-3:hover {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.shape-1 {
    -webkit-border-radius: 5px 50px 5px 50px;
    border-radius: 5px 50px 5px 50px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomleft: 50px;
    -moz-border-radius-bottomright: 5px;
}

.shape-2 {
    -webkit-border-radius: 50px 5px 50px 5px;
    border-radius: 50px 5px 50px 5px;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 50px;
}

.effect-4 {
    transition: border-radius 1s;
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
}

.effect-4:hover {
    border-radius: 50px 5px 50px 5px;
    -webkit-border-radius: 50px 5px 50px 5px;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 50px;
}

.effect-5 {
    transition: border-radius 1s;
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
}

.effect-5:hover {
    border-radius: 5px 50px 5px 50px;
    -webkit-border-radius: 5px 50px 5px 50px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomleft: 50px;
    -moz-border-radius-bottomright: 5px;
}

HTML Kode:

Gaya 1, Normal

 

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

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

Gaya 2, Square dan Rounded

 <a href="#" class="button square green">Button</a>
<a href="#" class="button rounded red">Button</a>

Gaya 3, Animasi

<a href="#" class="button square green effect-2">Button</a>
<a href="#" class="button rounded red effect-3">Button</a>

 Gaya 4, Shapes

<a href="#" class="button shape-1 green effect-4">Button</a>
<a href="#" class="button shape-2 red effect-5">Button</a>

Kamu pilih salah satu dari ke-4 gaya di atas.