CODEWITHSUNDEEP
cssbootstrap-4css-selectors
Raghav Tandulkar
Raghav Tandulkar

Reputation: 1

why does the :active property not working?

i am doing this using bootstrap but when i apply :active state as background color its not showing it but it is changing text color here's the HTML code :-

<button class="btn btn_style">1</button>
          <button class="btn btn_style">2</button>
          <button class="btn btn_style">3</button>
          <button class="btn btn_style">4</button>
          <button class="btn btn_style">5</button>

CSS code :-

.btn_style {
    background-color:   hsl(216, 12%, 8%);
    color: hsl(217, 12%, 63%);
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
}

.btn_style:hover, .submit_btn {
    background-color: hsl(25, 97%, 53%);
    color: #fff;
}

.btn_style:active {
    border: none;
    background-color: hsl(217, 12%, 63%);
    color: #fff;
}

i want it's active state as

background-color: hsl(217, 12%, 63%);
    color: #fff

Upvotes: 0

Views: 35

Answers (1)

ByteAtATime
ByteAtATime

Reputation: 160

The :active pseudo-selector is used to select links that have been clicked. What you’re looking for is :focus:

.btn_style:focus {
  border: none;
  background-color: hsl(217, 12%, 63%);
  color: #fff;
}

Upvotes: 2

Related Questions