Membuat Menu Blog Hover Dengan CSS

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. .


3 komentar

Wah Bisa dicoba nich....
thanks for share kk.

Nice Info Gan. . . .

Thx telah berkunjung kesini. . .
:)

Terimakasih atas komentar Anda.
Budayakan Bertanya dan Berkomentar dengan Sopan.
Tolong tinggalkan komentar jika Anda menemukan Link yang Broken.
EmoticonEmoticon