Reputation: 54
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
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