:active pseudo-class not working on button

user_16018428 0
Viewed 628

edit: I have been using Chrome to test. When I opened it in Edge, the :active worked.

So now it appears the issue is with Chrome. I am very new to coding (trying to learn on my own).

Does anyone know why this would be the case?

Trying to recreate the google homepage. I am creating the buttons and trying to recreate some of the effects. I am currently stuck on the :active pseudo-class.

I thought I had coded the :active to cause a light blue 1px border to replace the gray border of :hover. However, instead of that, I get a black border significantly thicker than 1px.

I tried to include more of the sequence in case it required them all (:link, :visited, :hover, :active), but the problem remains. Any suggestions?

.btn {
  padding: 10px;
  border: solid 1px #fff;
  border-radius: 3px;
  background-color: #ebebeb;
  font-size: 15px;
}

.btn:hover {
  border: solid 1px #b3b3b3;
}

.btn:active {
  border: solid 1px #cddbf1;
}

.btn1 {
  padding: 10px 15px;
}

.btn2 {
  margin-left: 10px;
}
<div id="search-buttons">
  <button type="button" class="btn btn1">Google Search</button>
  <button type="button" class="btn btn2">I'm Feeling Lucky</button>
</div>

pseudo-class css html
1 Answers

You do get the change to active color, but swiftly followed by the change to the hover color so not really noticable.

You may be wanting the focus pseudo class as that remains when the user has clicked even if they move away (until the next click somewhere).

.btn {
  padding: 10px;
  border: solid 1px #fff;
  border-radius: 3px;
  background-color: #ebebeb;
  font-size: 15px;
}

.btn:hover {
  border: solid 1px #b3b3b3;
}

.btn:active, .btn:focus {
  border: solid 1px #cddbf1;
}

.btn1 {
  padding: 10px 15px;
}

.btn2 {
  margin-left: 10px;
}
<div id="search-buttons">
  <button type="button" class="btn btn1">Google Search</button>
  <button type="button" class="btn btn2">I'm Feeling Lucky</button>
</div>

user_108674540
Related