Membuat Menu Blog Hover Dengan CSS

Membuat Menu Blog Hover Dengan CSS

Membuat Menu Blog Hover Dengan CSS ~ Tutorial Cara Membuat Menu di Blog ini bisa kita pakai di blog kita sebagai variasi untuk mempercantik blog kita. Menu yang ada diatas blog bisa kita tambahi script ini untuk memperindah blog kita tentunya.

Anda bisa membuat tampilannya dengan sedikit perubahan mungkin menambahi Hover, Text Shadow dan Box Efek shadow dengan CSS.

Anda bisa melihat contohnya di bawah ini.

• Button 1
• Button 2
• Button 3
• Button 4
• Button 5

Anda bisa melihat demonya diatas dan anda bisa memodifikasi nya agar sesuai dengan template blog Anda.

Script nya bisa anda copy dibawah ini
Embed Script CSS

ul {
  display: table;
  width: 400px;
}
li {
  display: table-cell;
  width: 20%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}
ul:hover li {
  width: 15%;
}
li:hover {
  width: 40% !important;
  opacity: 0.7;
}
ul li:nth-of-type(1) { background: #FF4C4C; }
ul li:nth-of-type(2) { background: #FFBF49; }
ul li:nth-of-type(3) { background: #444444; }
ul li:nth-of-type(4) { background: #6FDC6F; }
ul li:nth-of-type(5) { background: #3AADFE; }

 HTML

 <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
        <li>Button 4</li>
        <li>Button 5</li>
</ul>

Langsung Praktek Gan. .

Share this

Share on FacebookPlus on Google+