<div class="buttons buttons2">
      <button type="button" class="button5">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.buttons2 .button5:before{left: 50%; top: 0; transform: translateX(-50%); width: 0; height: 100%;}
      .buttons.buttons2 .button5:hover:before{width: 100%;}