CODEWITHSUNDEEP
htmlcss
Giacomo Ciampoli
Giacomo Ciampoli

Reputation: 821

Change button color depending on state

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!

Upvotes: 3

Views: 13776

Answers (4)

W Kenny
W Kenny

Reputation: 2069

Try this one~

<style>
.btn:hover{background-color: #b44ce1}
.btn{background-color: #b44ce1}
</style

<a class="waves-effect waves-light btn">Submit</a>

It works well for me~

Upvotes: 0

kyun
kyun

Reputation: 10274

.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)

Upvotes: 6

Gerald Aburto
Gerald Aburto

Reputation: 11

Use MaterializeCss colors helper clases Materialize Colors

<a class="waves-effect waves-light btn amber darken-4">button</a>

Upvotes: 1

csling
csling

Reputation: 328

Use the following:

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

Upvotes: 4

Related Questions