コード

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;
}
.nav__item a {
  display: block;
  padding: 5px;
  color: #ea8a25;
  text-align: center;
  text-decoration: none;
  border: 2px solid #ea8a25;
  border-radius: 0 10px 10px 0;
  background: #ffe7ce;
  transition: .3s;
}
.nav__item a:hover {
  Padding: 50px;
  font-size: 2em;
}

やってることは超シンプル。マウスを乗せた時に、paddingとfont-sizeを変えるだけ。widthを変えれば横にも広がる。