サンプル
See the Pen Codepen by Tora (@webtoranomaki) on CodePen.
コード
HTML
<nav>
<ul class="nav__list">
<li class="nav__item"><a href="#">btn</a></li>
<li class="nav__item"><a href="#">btn</a></li>
<li class="nav__item"><a href="#">btn</a></li>
<li class="nav__item"><a href="#">btn</a></li>
<li class="nav__item"><a href="#">btn</a></li>
</ul>
</nav>
CSS
/* base settings */
ul, li { margin: 0; padding: 0; list-tyle: none;}
.nav__item {
width: 200px;
margin-bottom: 2px;
transition: .3s;
}
.nav__item a {
display: block;
padding: 5px;
color: #ea8a25;
text-align: right;
text-decoration: none;
border: 2px solid #ea8a25;
border-radius: 0 10px 10px 0;
background: #ffe7ce;
}
.nav__item:hover {
width: 300px;
}
マウスを乗せた時に、width
を変えるだけ。font-size
やheight
をいじって、文字サイズや高さも変化させることが出来る。