Odd problem which I have not seen an answer for.

Trying to create a simple rounded corner link button:


<a href="#"  class="link_button"><span>Add A New Somthing</span></a>


    .link_button {
        background: transparent url('img/backgrounds/bg-buttonRight.png') no-repeat scroll top right;
        color: #444;
        display: block;
        float: left;
        font: normal 12px arial;
        height: 41px;
        margin-right: 6px;
        padding-right: 14px; 
        text-decoration: none;

    .link_button span {
        background: transparent url('img/backgrounds/bg-buttonLeft.png') no-repeat top left;
        display: block;
        line-height: 31px;
        padding: 5px 0 5px 14px;

    .link_button:active {
        background-position: bottom right;
        color: #000;
        outline: none; 

    .link_button:active span {
        background-position: bottom left;
        padding: 6px 0 4px 18px; 


alt text

The two images are overlapping, which is what I want, but why the discoloration? Why would one be darker? I tried using png jpg, gif, with and without transparency.

I posted the code here, along with another attempt using only one jpg instead of two, but still the same results.

Did I miss something?

Thanks in advance.

1 answer


Opening your images in an image editor explains all. the right hand image is cut from the gradient edge and the button is lighter in the middle, so when you put the darker image over the lighter middle you can see the difference.

you'll need a simpler gradient to use the sliding doors technique - yours is a radial from the center gradient.

here's your bg jpg with the end cut and pasted to the middle, so it's not the code, but the image that's the problem.

alt text

The same trick using your two png images:

alt text

Answered almost 10 years ago by Tony Crockford