بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Menu button animasi dan kali ini kami akan memberikan cara membuatnya. Sebenarnya dengan efek ini button akan menjadi membesar dari sedia kala. Tentu saja dengan efek CSS3.
Dengan button ini, maka link text akan tergantikan dengan gambar tombol dan berefek animasi. Tidak menggunakan gambar tentu saja karena gambar akan memberatkan loading blog. Sedangkan dengan CSS3 hal itu tidak berpengaruh.
Baca Juga : Cara Membuat Tautan Link di Artikel Blog dengan Mudah
Kekuatan dari CSS sudah tidak dapat diragukan lagi. Mengingat bahasa struktur web ini mendominasi dari hari ke hari. Dan hampir sekian banyak blogger menggunakan, tentu saja ada juga yang tidak menggunakannya.
Sebenarnya CSS untuk pemanis tentu saja. Bahasa dasar dari membangun web adalah HTML. Sungguh perpaduan yang ciamik ketika HTML bergabung dengan CSS. Menjadikan hal kreativitas baru dari sebuah display web.
Baca Juga : Variasi Text Area dengan CSS di Postingan Blog
Kembali lagi ke button, dengan menu button animasi ini setidaknya tombol akan bergerak atau tidak diam ditempat ketika kita sorot mouse. Sungguh elegan bukan main ini kode. Sekarang kita mulai saja ya
Menu Button Animasi dengan CSS3
Masuk dulu ke template. Ya karena dari templatelah blog kita bisa menampilkan tampilan yang mempesona. Karena dasar utama utak-atik blog adalah template. Kembali lagi ke tutor.
Cari kode ]]</b:skin>, kemudian tempelkan kode dibawah ini diatas kode ]]</b:skin>. Perhatikan dengan seksama ya kodenya :
.ca-menu{
padding: 0;
margin: 5px auto;
width: 100%;
}
.ca-menu li{
width: 100%;
height: 75px;
overflow: hidden;
display: block;
background: #FFE4C4;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
border-left: 10px solid #000bff;
transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
.ca-menu li a{
text-align: left;
display: block;
width: 100%;
height: 60px;
color: #333;
position:relative;
}
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 15px;
text-shadow: 0px 0px 1px #333;
line-height: 60px;
position: absolute;
width: 90px;
left: 5px;
text-align: center;
transition: all 300ms linear;
}
.ca-content{
position: absolute;
left: 60px;
width: 300px;
height: 75px;
top: 20px;
}
.ca-main{
font-size: 20px;
transition: all 300ms linear;
}
.ca-sub{
font-size: 10px;
color: #666;
transition: all 300ms linear;
}
.ca-menu li:hover{
border-color: #DC143C;
background: #FF7F50;
}
.ca-menu li:hover .ca-icon{
color: #A52A2A;
text-shadow: 0px 0px 1px #fff004;
font-size: 25px;
}
.ca-menu li:hover .ca-main{
color: #A52A2A;
font-size: 30px;
}
.ca-menu li:hover .ca-sub{
color: #fff;
font-size: 20px;
}Sekarang masuk ke sidebar tempat button ini akan tampil. Atau masuk ke postingan juga bisa. Masuk ke Mode HTML bukan
<ul class="ca-menu">
<li>
<a href="http://alifacode.com">
<span class="ca-icon">1</span>
<div class="ca-content">
<font size="3" class="ca-main">Sample pertama</font>
<font size="3" class="ca-sub">Alifacode</font>
</div>
</a>
</li>
</ul>
<ul class="ca-menu">
<li>
<a href="http://alifacode.com">
<span class="ca-icon">2</span>
<div class="ca-content">
<font size="3" class="ca-main">Sample kedua</font>
<font size="3" class="ca-sub">Alifacode</font>
</div>
</a>
</li>
</ul>
<ul class="ca-menu">
<li>
<a href="http://alifacode.com">
<span class="ca-icon">3</span>
<div class="ca-content">
<font size="3" class="ca-main">Sample ketiga</font>
<font size="3" class="ca-sub">Alifacode</font>
</div>
</a>
</li>
</ul>
<ul class="ca-menu">
<li>
<a href="http://alifacode.com">
<span class="ca-icon">4</span>
<div class="ca-content">
<font size="3" class="ca-main">Sample keempat</font>
<font size="3" class="ca-sub">Alifacode</font>
</div>
</a>
</li>
</ul>Nah sekarang untuk Catatan ya :
Untuk alamat alifacode.com ganti dengan URL artikel yang akan kamu tuju
Tulisan sample kesatu sampe keempat ganti dengan tulisan deskripsi artikel button
Sudah sampai titik akhir dari tutorial ya. Sekarang kamu lihat display blog kamu pasti sudah terlihat bagus. Terima kasih ya yang sudah mampir kesini dan membaca artikel Menu Button Animasi dengan CSS3. Wassalam. Sampai jumpa lagi.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Menu Button Animasi dengan CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
