Home/ Questions/Q 8729677
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T08:52:35+00:00

I have a solid background color on a button, and I’m looking for some

  • 0

I have a solid background color on a button, and I’m looking for some CSS(3?) that would overlay a semi-transparent white on top of the color, but only on the top 50% of it. I’m looking for a non-gradient, non-image-based shine effect.

How can this be accomplished without using an image? It’s ok if the solution doesn’t support older browsers.

EDIT: bookcasey’s answer below seems to work except the font is also made transparent…

<!DOCTYPE html>
<html>
<head>
<style>
a
{
    display: inline-block;
    padding:30px;
    background: salmon;
    position: relative;
    text-align: center;
    text-decoration:none;
    color:#000;
    font-size:20pt;
    font-weight:bold;
}

a:before
{
    content: '';
    width: 100%;
    height: 50%;
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left:0;
}
</style>
</html>
<body>

<div>
    <a href="#">Test Link</a>
</div>

</body>
</html>

Thanks,

Andy

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use an absolutely positioned pseudo element on a relative parent.

    Demo

    a {display: block; width: 100px; height: 50px; background: salmon; position: relative;}
a:before {
    content: '';
    width: 100%;
    height: 50%;
    background: rgba(255,255,255,.5);
    position: absolute;
    top: 0;
    left:0;
}

    ​

    • 0