<ul>
  <li class="a">Put on!</li>
  <li>Sample</li>
</ul>

li {
    display : inline-block;
    background: #74653D; 
    color: #FFFBD5; 
    width: 260px;/*元のボタン幅*/
    line-height: 66px;
    margin-right: 50px;/*右隣の余白*/
    border-radius: 0 33px 33px 0;/*右側だけ丸くしています*/
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.a:hover {
  width: 300px;/*マウスオーバーで幅が変わります*/
  margin-right: 10px;/*幅が増えた分を減らします*/
}