Home/ Questions/Q 7665113
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T14:28:42+00:00

I’ve got these CSS buttons that use gradients generated by http://www.colorzilla.com/gradient-editor/ – the :hover

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;

    }​

    • 0