background with same outline cut of shape

Question

I want a background with the same outline cut as the shape of a button. Please suggest any other way to create the same outline shape.

My create button shape:

What I actually want:

https://jsfiddle.net/z56ph1dk/1/

.btn{
      background-image: -webkit-linear-gradient(bottom, #D4AF37, #D4AF37, #D4AF37, #D4AF37, #D4AF37);
    background-image: -o-linear-gradient(bottom, #D4AF37, #D4AF37, #D4AF37, #D4AF37, #D4AF37);
    background-image: linear-gradient(to top, #D4AF37, #D4AF37, #D4AF37, #D4AF37, #D4AF37);
    -webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,100% 80%,94% 100%,100% 100%,0% 100%);
    clip-path: polygon(0% 0%,100% 0%,100% 100%,100% 80%,94% 100%,100% 100%,0% 100%);
    padding:15px 30px;
    color:#fff;
    border-radius:0;
    border: none;
}

<br><br><br><br>
<center><button class="btn" type="submit">
        Submit
      </button></center>