Question

I’m wanting to add a transparent black overlay to a button for it’ :active state, so when you click it, it’s the same gradient but with just an overlay of e.g. rgba(0,0,0,.3)

The way I thought this would work is (using webkit in this example):

background:rgba(0,0,0,.3), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);

or without the comma, and the order reversed… but nothing shows up at all!

I’m not keen on adding another div to act as the overlay to do it, so is there a strictly CSS way to do this? I was thinking maybe it’s a :before or :after pseudo class, but I don’t have a clue how to use these!

Would really appreciate an answer, this has been bugging me for a long time.

Answer 1

You can do it with ::after pseudo-element.

First, you need to define the button CSS with position: relative and then use ::after with position: absolute, like this:

.button {
  position: relative;
}

.button:active::after {
    content: ' ';
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Live Fiddle demo