edit: I have discovered that the :active pseudo-class is not working properly in Chrome, but it does work in Edge. As a beginner in coding, I am trying to figure out why this issue exists.
I am currently attempting to replicate the google homepage and struggling with the button effects. Specifically, I am having trouble with the :active pseudo-class.
My intention was to create a light blue 1px border for the :active state, replacing the gray border from :hover. However, the result is an unexpectedly thick black border instead.
Even after including all the necessary sequences (:link, :visited, :hover, :active), the problem persists. Any advice on how to resolve this?
.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>