Question 268072 in Html Question posted in
Some basic documentation can be found here.

Html – CSS background-color value with var(–hexcode) and additional alpha value

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>
Tags:

2

Answers


  1. 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;
}
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search