Why CSS variable is not working in button? [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 5 years ago.

Improve this question

If I use hex color it work's perfectly. Don't know why custom property doesn't working.

I tried everything, but no luck :( {I am using chrome}

:root {
  --primary-color: hsl(0, 0% 20%);
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  /* border: none; */
  background-color: var(--primary-color);
  /* color: #fff; */
}

<button class="btn">Read More</button>

You example works for me, as-is check your HSL color... — vsync
– vsync, Commented Apr 22, 2020 at 8:31
The term is not "custom CSS property" but "CSS variable" — vsync
– vsync, Commented Apr 22, 2020 at 8:33
@vsync custom property is also correct: w3.org/TR/css-variables-1 — Temani Afif
– Temani Afif, Commented Apr 22, 2020 at 8:34
What a funy off-topic flamewar! @vsync, those thingies in CSS rules between {…} are called properties, not "variables", right? They can be declared only inside rules and are bound only to elements matching selector and depending their declared inheritability cascades down in DOM tree (what is nice distinction from e.g. SASS variables). Then why would you call color in *{color:red} property name and --color in *{--color:red} variable name? Maybe the only obligation to w3 could be decision to call their getter var(), but most probably there were no better alternatives. — myf
– myf, Commented Apr 22, 2020 at 9:36

vsync · Accepted Answer · 2020-04-22 08:40:13Z

0

You need to add a comma , after the second parameter of HSL.

Since you havn't provided an image of the desired color, i'm guessing this was the mistake and you are after a grey color.

:root {
  --primary-color: hsl(0, 0%, 20%)
}

body {
  background: var(--primary-color)
}

answered Apr 22, 2020 at 8:40

vsync

133k61 gold badges345 silver badges430 bronze badges

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

2 Comments

Mahabubur Rahman Over a year ago

I miss that comma but don't know how it work's on another main element by the way thanks brother... I spend around 2 hour on this.

vsync Over a year ago

Here to help my programming brother!

Collectives™ on Stack Overflow

Why CSS variable is not working in button? [closed]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related