Membuat Menu Blog Hover Dengan CSS |
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
Script nya bisa anda copy dibawah ini
Embed Script CSS
ul {HTML
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; }
<ul>Langsung Praktek Gan. .
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
<li>Button 5</li>
</ul>