Grid, Flex, JS Solution

Hi Dennis,

How do I keep the button highlighted after clicking?

You used <button> element for the number button. Button doesn't have on and off state, so it's difficult to make the button highlighted after clicking. Though I think it could be achieved by javascript, I'll consider it as hacking. The best element you could use for that is <radio>. It has on and off state (checked or unchecked), so when the user click a number, it becomes checked, and you can give it the style that you want.

Here's an example.

<input type="radio" id="rate1" name="rate" value="1">
<label for="rate1">1</label>
<input type="radio" id="rate2" name="rate" value="2">
<label for="rate2">2</label>
<input type="radio" id="rate3" name="rate" value="3">
<label for="rate3">3</label>
<input type="radio" id="rate4" name="rate" value="4">
<label for="rate4">4</label>
<input type="radio" id="rate5" name="rate" value="5">
<label for="rate5">5</label>

You could then hide the input and style the label according to your need.

input[type="radio"] {
    display: none;
}
input[type="radio"] + label {
    font-weight: var(--fw-h1);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 100%;
    color: var(--Light-Grey);
    background-color: hsl(213deg 20% 18%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
input[type="radio"] + label:hover {
    color: var(--White);
    background-color: var(--Orange);
}
input[type="radio"]:checked + label {
    color: var(--White);
    background-color: rgb(126 135 150);
}

Hope this helps. Happy coding!