Change button color depending on state

Question

I have a button with a default green background. On hover, the background color is changed.

When the button is clicked, I want it to fall back to the green background.

How do I achieve this? I tried the following without success:

.btn {
  background-color: #4dd0e1
}

.btn:hover {
  background-color: #01579b
}

.btn:active {
  background-color: #4dd0e1
}

.btn:visited {
  background-color: #4dd0e1
}

<a href="#" target="_blank" class="waves-effect btn"><i class="material-icons right">arrow_forward</i>button</a>

Thanks!

Answer 1

.btn{
  background-color: aqua
}
.btn:visited{
  background-color: yellow
}
.btn:hover {
  background-color: skyblue
}
.btn:active{
  background-color: pink;
}
.btn:focus{
  background-color: pink;
}

<a href="#" target="_blank" class="waves-effect btn"><i class="material-icons right">arrow_forward</i>button</a

You should follow this order when you write css code

1. a:link
2. a:visited
3. a:hover
4. a:active
5. a:focus

I don't know why, but it makes working your code.

You just change order of CSS Selectors (:visited, :hover, :active, :focus)

Answer 2

Use the following:

.btn:focus{ 
  background-color: #4dd0e1 
}