Button properties revert back to normal after clicking on it

Ask a question

I’m working on a little project and I implemented a button in that with a hover and CSS properties.

But the thing is after clicking on it, it reverts back to the normal basic button. i.e. it loses all it’s CSS properties.

I tried to see if the JavaScript is a reason for this change but I failed to find the reason behind it.


<button class="btn6">1 MB</button>

CSS Button:

.btn6, .btn6:link, .btn6:visited {
  padding: 15px;
  border: 3px solid #333;
  color: #333;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 3px;
  transition: all .2s ease-in-out;
.btn6:hover, .btn6:link:hover, .btn6:visited:hover {
  background: #333;
  border: 3px solid #333;
  color: #fefefe;
  border-radius: 50px;

Since the Javascript is long, I provide the link to the codepen ( https://codepen.io/imgkl/pen/XwNyKZ )

The button should retain the CSS properties after clicked.

Coin iconoffer bounty
add comment

0 Answer

Your Answer