Menu Button Navigasi Animasi dengan CSS3

Otak-atik CSS3 lagi aja yuk gan. Hari kemarin udah buat Animasi Nemo dan Awan dengan CSS3. Sekarang ane akan tunjukin lagi salah satu kehebatan teknik Cascading Style Sheet atau biasa kita sebut CSS .. ehm, gimana ya ntar jadinya. Kita lanjutin dengan penjelasan dan keterangan singkat tentang topik kita kali ini tentang Membuat Menu Button Navigasi dengan Animasi CSS3. Di tutor ini ane mo ngebantu agan ngebuatin background menu button untuk link artikel agan-agan sekalian. Bila agan memiliki link dan harus didesain sedemikian rupa, nggak ada salahnya pake trik ini soalnya bagus kok ntar jadinya. Apalagi ada animasinya dikit. Nggak usah ane panjang lebarin ya tulisannya. Tapi cukup praktekkin aja yang ada dibawah ini. Ntar pasti jadi bagus tuh blog agan.

Langsung aja ya gan kita ke prikitiewnya .. Monggo

Pertama kalian masuk ke Edit HTML
Terus cari ]]><b:skin>
Tempel CSS3 dibawah tepat diatasnya

.ca-menu{
padding: 0;
margin: 20px auto;
width: 500px;
}

.ca-menu li{
width: 500px;
height: 100px;
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: 100%;
color: #333;
position:relative;
}

.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
text-shadow: 0px 0px 1px #333;
line-height: 90px;
position: absolute;
width: 90px;
left: 20px;
text-align: center;
transition: all 300ms linear;
}

.ca-content{
position: absolute;
left: 120px;
width: 370px;
height: 60px;
top: 20px;
}

.ca-main{
font-size: 30px;
transition: all 300ms linear;
}
.ca-sub{
font-size: 14px;
color: #666;
transition: all 300ms linear;
}

.ca-menu li:hover{
border-color: #fff004;
background: #000;
}
.ca-menu li:hover .ca-icon{
color: #fff004;
text-shadow: 0px 0px 1px #fff004;
font-size: 50px;
}
.ca-menu li:hover .ca-main{
color: #fff004;
font-size: 14px;
}
.ca-menu li:hover .ca-sub{
color: #fff;
font-size: 30px;
}

Simpan template
NB : ingat centrang dulu Expand Widget Template untuk memback up template agan
Setelah itu biarkan dulu

Kemudian agan masuk di Sidebar bisa kiri atau kanan
Atau bisa di footer ..
Tempelkan HTML berikut di konten kosong yang tersedia

<ul class="ca-menu">
<li>
<a href="http://1001tawa.blogspot.com">
<span class="ca-icon">A</span>
<div class="ca-content">
<font size="3" class="ca-main">Contoh pertama sob.</font>
<font size="3" class="ca-sub">Gimana masih bingung?</font>
</div>
</a>
</li>
</ul>

<ul class="ca-menu">
<li>
<a href="http://1001tawa.blogspot.com">
<span class="ca-icon">B</span>
<div class="ca-content">
<font size="3" class="ca-main">Contoh kedua sob.</font>
<font size="3" class="ca-sub">Gimana masih bingung?</font>
</div>
</a>
</li>
</ul>

<ul class="ca-menu">
<li>
<a href="http://1001tawa.blogspot.com">
<span class="ca-icon">C</span>
<div class="ca-content">
<font size="3" class="ca-main">Contoh ketiga sob.</font>
<font size="3" class="ca-sub">Gimana masih bingung?</font>
</div>
</a>
</li>
</ul>

<ul class="ca-menu">
<li>
<a href="http://1001tawa.blogspot.com">
<span class="ca-icon">D</span>
<div class="ca-content">
<font size="3" class="ca-main">Contoh keempat sob.</font>
<font size="3" class="ca-sub">Gimana masih bingung?</font>
</div>
</a>
</li>
</ul>

Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar