CODEWITHSUNDEEP
google-chromecss
pspahn
pspahn

Reputation: 2790

CSS Gradient - Chrome - icky vertical stripe

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 */
}

Upvotes: 2

Views: 1509

Answers (2)

GStubbenhagen
GStubbenhagen

Reputation: 182

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;

}​

Upvotes: 1

awake12
awake12

Reputation: 204

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).

Upvotes: 0

Related Questions