CSS Gradient - Chrome - icky vertical stripe

Problem

enter image description here

I've got these CSS buttons that use gradients generated by http://www.colorzilla.com/gradient-editor/ - the :hover state simply reverses the gradient, active state adds top: 1px;

As you can see in the image, there is a faint vertical stripe on the left edge of the 'free trial' button and on the right edge of the 'buy now' button.

This only shows up in Chrome (looks fine in Safari). Is anyone aware of a fix for this?

I've got some CSS below

.big-button {
    width: 120px;
    height: 40px;
    border: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
}
.big-button:hover {
    cursor: pointer;
}
.big-button-wrap .big-button:active {
    top: 7px !important;
}

.big-button.orange {
    background: #fe7d0a; /* Old browsers */
    background: -moz-linear-gradient(top,  #fda11a 0%, #ff6801 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fda11a), color-stop(100%,#ff6801)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #fda11a 0%,#ff6801 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #fda11a 0%,#ff6801 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #fda11a 0%,#ff6801 100%); /* IE10+ */
    background: linear-gradient(top,  #fda11a 0%,#ff6801 100%); /* W3C */
    border: 1px solid #ff6801;
}
.big-button.orange:hover, .big-button.orange:active {
    background: #fe7d0a; /* Old browsers */
    background: -moz-linear-gradient(top,  #ff6801 0%, #fda11a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6801), color-stop(100%,#fda11a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* IE10+ */
    background: linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* W3C */
}
Problem courtesy of: pspahn

Solution

Adding border-left:none; for .big-button.orange:hover and border-right:none; for the green removed the lines for me in the fiddle (using Chrome).

Here's my CSS:

.big-button.orange:hover, .big-button.orange:active {
background: #fe7d0a; /* Old browsers */
background: -moz-linear-gradient(top,  #ff6801 0%, #fda11a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6801), color-stop(100%,#fda11a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* IE10+ */
background: linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* W3C */
border-left:none;

}

.big-button.green:hover, .big-button.green:active {
background: #6a9a23; /* Old browsers */
background: -moz-linear-gradient(top,  #558711 0%, #8cb941 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#558711), color-stop(100%,#8cb941)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #558711 0%,#8cb941 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #558711 0%,#8cb941 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #558711 0%,#8cb941 100%); /* IE10+ */
background: linear-gradient(top,  #558711 0%,#8cb941 100%); /* W3C */
border-right:none;

}​

Solution courtesy of: GStubbenhagen

Discussion

I copied your css and couldn't recreate the problem. It looks like it might be the wrapper around the two buttons which has the problem?

Try making the gradients applied to 'background-image' rather than 'background' (they normally are).

Discussion courtesy of: awake12

This recipe can be found in it's original form on Stack Over Flow.