Overlay a CSS gradient with an RGBA colour?

background-image, css, overlay

Solution

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

Problem

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.

Original source