Assalamu'alaikum,,,
Pagi sobat BLOG*ISLAM, sekarang akan saya kasih tahu tips trik untuk membuat TOMBOL 3D di Blog kalian. Tombol tersebut tidak akan keluar dalam kamu membuat postingan tetapi akan keluar di laman kamu nantinya yang akan menuju link kalian yang akan kamu masukkan nantinya.
Langsung saja ke TKPnya:
1. Masuk ke blogger kamu
2. Masuk ke Template>>> Edit HTML
3. Kalau sudah masuk ke Edit HTML, sekarang kamu cari ]]></b:skin> dengan cara cepat tekan tombol ctrl+F
4. Setelah sudah ketemu masukkan kode di bawah ini tepat diatasnya kode ]]></b:skin> :
Kode CSS untuk tombol atau button
.btn-animated
{
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color:#111 !important;
padding: 10px 25px;
margin: 0 20px;
text-shadow:0px 1px 0px
rgba(255,255,255,0.3)
text-decoration: none;
}
Kode
CSS untuk memberikan efek hover pada tombol
.effect-1 {
transition: padding 1s;
-webkit-transition: padding 1s;
-moz-transition: padding 1s;
-o-transition: padding 1s;
-ms-transition: padding 1s;
}
.effect-1:hover
{
padding: 10px 200px;
}
.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;
}
.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;
}
Kode
CSS untuk tombol atau button dengan efek shapes
.square {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.rounded {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.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;
}
Kode CSS
untuk tombol warna
Banyak warna
yang bisa digunakan dalam tombol animasi ini, dan sebagai contoh saya hanya
memberikan tombol yang berwarna UNGU saja, untuk yang lainnya, silahkan gunakan
warna yang kalian suka. Untuk mengganti warna, silahkan lihat di Kode Warna
.ungu {
border: solid 1px #841FF0;
background-color: #A93EF0;
background: -moz-linear-gradient(top,
#A93EF0 0%, #D07FF0 100%);
background: -webkit-linear-gradient(top,
#A93EF0 0%, #D07FF0 100%);
background: -o-linear-gradient(top, #A93EF0
0%, #D07FF0 100%);
background: -ms-linear-gradient(top,
#A93EF0 0% ,#D07FF0 100%);
background: linear-gradient(top, #A93EF0 0%
,#D07FF0 100%);
-webkit-box-shadow: 0px 0px 1px #9F85F0,
inset 0px 0px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 1px #9F85F0, inset
0px 0px 1px #FFFFFF;
box-shadow: 0px 0px 1px #9F85F0, inset 0px
0px 1px #FFFFFF;
}
.ungu:hover
{
background-color: #EE5EF0;
background: -moz-linear-gradient(top,
#EE5EF0 0%, #CA61C9 100%);
background: -webkit-linear-gradient(top,
#EE5EF0 0%, #CA61C9 100%);
background: -o-linear-gradient(top, #EE5EF0
0%, #CA61C9 100%);
background: -ms-linear-gradient(top,
#EE5EF0 0% ,#CA61C9 100%);
background: linear-gradient(top, #EE5EF0 0%
,#CA61C9 100%);
}
.ungu:active
{
background-color: #AB83C9;
background: -moz-linear-gradient(top,
#AB83C9 0%, #9F8BC9 100%);
background: -webkit-linear-gradient(top,
#AB83C9 0%, #9F8BC9 100%);
background: -o-linear-gradient(top, #AB83C9
0%, #9F8BC9 100%);
background: -ms-linear-gradient(top,
#AB83C9 0% ,#9F8BC9 100%);
background: linear-gradient(top, #AB83C9 0%
,#9F8BC9 100%);
}
Penulisan
kode markup untuk tombol 3D dimensi diatas
Untuk
penulisan tombol 3D animasi diatas, silahkan salin kode HTML berikut
<a
href="#" class="btn-animated square ungu effect-5">Klik
Disini</a>
HASIL
TAMPILAN
5. SAVE.
6. Silahkan
membuat postingan yang dengan link tetapi formatnya di tambah class="EFEK
YANG MAU DIKASIH"
Mantap tutorialnya. kunjungan balik dari waroenkblog.com kang.
ReplyDeleteTerimakasih, ya kang saya akan berkunjung balik ke waroenkblog.com
DeleteHello my family member! I wish to say that this post is
ReplyDeleteamazing, great written and come with almost all significant infos.
I would like to peer extra posts like this .
Stop by my site: minecraft free download
I have learn a few just right stuff here. Definitely worth
ReplyDeletebookmarking for revisiting. I wonder how much attempt you put to create such a magnificent informative web site.
Review my web site - quest bars
You ought to be a part of a contest for one of the finest websites
ReplyDeleteonline. I most certainly will recommend this website!
Feel free to surf to my page :: best dating sites
Good way of describing, and good piece of writing to take information regarding my presentation subject, which i am going to deliver in university.
ReplyDeleteAlso visit my web-site: best dating sites