<div class="buttons">
      <button type="button" class="button3">more</button>
    </div>

      *{margin: 0; padding: 0;}
      button{background: 0 none; border: 0 none;}

      .buttons{position: relative; text-align: center; margin-top: 100px;}
      .buttons button{overflow: hidden; position: relative; display: inline-block; vertical-align: top; width: 200px; height: 100px; line-height: 100px; border: 1px solid #225ea7; transition: all 0.5s;}
      .buttons button:hover{color: #fff;}
      .buttons button:before{content: ""; z-index: -1; position: absolute; background: #225ea7; transition: all 1s;}
.buttons .button3:before{left: 0; bottom: 0; width: 100%; height: 0; border-top-left-radius: 50%; border-top-right-radius: 50%;}
.buttons .button3:hover:before{height: 200%;}