CSS background-color value with var(--hexcode) and additional alpha value [duplicate]

Question

I have a button with a 2px border and transparent background. And I want to make the background-color become semi-transparent when hover, the hex color code is store in a var() with the name --hexcode. The problem I facing is how to add alpha value after the var() value

:root {
  --hexcode: #fff;
}

.stroke-btn {
  background-color: transparent;
  border: 2px solid #FFF;
  color: #FFF;
}

.stroke-btn:hover {
  background-color: var(--hexcode) + '88';
}

<button type="button" class="stroke-btn">Click Me<button>

The equivalent of rgba(256,256,256,.88) is #ffffffe0 (which you can establish via the browser's color inspector). However, there doesn't seem to be a way to tack this onto the end of your custom property. In any case, you'd have to change the custom property to #ffffff for it to work, or you'd have to tack on fffe0 to the end. But I can't figure out any way to tack that on to the end of var(--hexcode). I've tried all sorts of combinations, such as var(--hexcode)fffe0 etc., but none of them worked. Interested to know if there is a way. — ralph.m
– ralph.m, Commented Oct 19, 2023 at 5:33

user3163495 · Accepted Answer · 2023-10-19 04:09:45Z

0

Use the following:

.stroke-btn:hover {
    background-color: rgba(var(--hexcode), 0.88);
}

If that doesn't work, then use this to define your var:

:root {
    --hexcode : 255, 255, 255;
}

answered Oct 19, 2023 at 4:09

user3163495

3,9685 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mok_ku Over a year ago

i had thought of this, but i have a long list of hexcode to convert to rgb, all existing style that use hexcode, i have to change it to rgba(var(--otherhex)). that will be too much.

user3163495 Over a year ago

@mok_ku it would only take a couple of minutes to write a script to convert all your hex values into rgb values. see this question: stackoverflow.com/a/5624139/3163495

Brett Donald · Accepted Answer · 2023-10-19 04:50:59Z

0

You can create a variable in hex format with the alpha included.

:root {
  --red-50: #ff00007f;
  --blue-50: #0000ff7f;
}

body {
  background: #888;
}

.stroke-btn {
  font-size: 2em;
  background-color: transparent;
  border: 2px solid #FFF;
  color: #FFF;
  padding: 10px 20px;
  border-radius: 8px
}

.stroke-btn.red:hover {
  background-color: var(--red-50);
}
.stroke-btn.blue:hover {
  background-color: var(--blue-50);
}

<button class="stroke-btn red">Click Me</button>
<button class="stroke-btn blue">Click Me</button>

answered Oct 19, 2023 at 4:50

Brett Donald

15.4k5 gold badges36 silver badges62 bronze badges

Collectives™ on Stack Overflow

CSS background-color value with var(--hexcode) and additional alpha value [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related