Button with pointed edges and shadow

I'm trying to make a CSS button . As you can see below, I'm not able to create a gradient for the second HTML-element for the corners. Normally I would use borders or simply rotate a element to create a triangle with a gradient, but the problem is that my triangle isn't a 90 degree square.

Desired design: (Grayscale, retina 200% zoomed)

My CSS button: (Blue, retina 200% zoomed)

Is there a better way to create this button with CSS?

http://jsfiddle.net/G8ZBz/ or simply read below:

HTML-code

<div class="button">
    <div class="button-inside"></div>
</div>

CSS

.button {
    width: 225px;
    height: 60px;
    background: #2983d2;
}
.button:before {
    position: absolute;
    width: 0px;
    height: 0px;
    left: -13px;
    content: "";
    display: block;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 13px solid #2983d2;
}
.button:after {
    position: absolute;
    width: 0px;
    height: 0px;
    top: 0;
    right: -13px;
    content: "";
    display: block;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 13px solid #2983d2;
}
.button .button-inside {
    position: relative;
    width: 221px;
    height: 55px;
    margin-left: 2px;
    background: #469bf9; /* Old browsers */
    background: -moz-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#469bf9), color-stop(50%,#1e80f7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* IE10+ */
    background: linear-gradient(to bottom, #469bf9 50%, #1e80f7 50%); /* W3C */
}
.button .button-inside:before {
    position: absolute;
    width: 0px;
    height: 0px;
    left: -13px;
    content: "";
    display: block;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 13px solid #1e80f7; /* should be a gradient */
}
.button .button-inside:after {
    position: absolute;
    width: 0px;
    height: 0px;
    top: 0;
    right: -13px;
    content: "";
    display: block;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 13px solid #1e80f7; /* should be a gradient */
}