CODEWITHSUNDEEP
cssbutton
Nate
Nate

Reputation: 54

How do I change the animation of a clicked button in css?

When a button that is not styled by any css is clicked, it turns blue for an instant and then returns to its normal white color.

However, when a button that is styled as shown below is clicked, a blue highlight appears around it and does not go away until something else on the screen is clicked.

I would like my button not to have this weird blue highlight. How would I fix this and still keep the button styled?

Any solutions I have found thus far involve javascript, but I am looking for a pure css solution here.

<html>
<head>
<style>

  button {
      border: solid #316A8F;
      border-radius: 12px;
      background-color: #F9F9F9;
      color: #003C63;
  }

</style>
</head>
<body>

<button>click me.</button>

</body>
</html>

Upvotes: 0

Views: 78

Answers (1)

Joel Hager
Joel Hager

Reputation: 3440

It's called focus try this:

button:focus {
    outline: none;
}


button {
      border: solid #316A8F;
      border-radius: 12px;
      background-color: #F9F9F9;
      color: #003C63;
  }
  
  button:focus {
    outline: none;
  }
<button>click me.</button>

Upvotes: 1

Related Questions