Untitled

<button class="button">
     avcicode
</button>

<style>
     button{
          padding: 1em 2em;
          border:none;
          border-radius: 5px;
          font-weight: bold;
          letter-spacing: 3px;
          background: #317ee8;
          color: #fff;
          text-transform: uppercase;
          transition: all 1000ms;
          font-size: 15px;
          position: relative;
          overflow: hidden;
          outline: 2px solid #088187;
     }
     button:hover{
          color:#a7faf9;
          transform: scale(1);
          outline: 2px solid #088187;
          box-shadow: 4px 6px 17px -4px #317ee8;
     }
     .button::before{
          content: "";
          position: absolute;
          left: -50px;
          top:0;
          width: 0;
          height: 100%;
          background-color: #31e893;
          transform: skewX(30degv);
          z-index: -1;
          transition: width 1000ms;
     }
     button:hover::before{
width: 250%;
     }
</style>