CODEWITHSUNDEEP
htmlcssbackground-color
user11955706
user11955706

Reputation:

relative background color on hover

I have a simple html code that is below:

button {
  position: absolute;
  font-size: x-large;
  border-radius: 25px;
  width: 140px;
  height: 50px;
  margin: 5px;
  color: white;
  border: none;
  cursor: pointer;
}

#home-btn {
  background: orange;
}

#panel-btn {
  background: yellowgreen;
  right: 0;
}
<button title="home" id="home-btn" class="fa fa-home"></button>
<button title="panel" id="panel-btn" class="fa fa-key"></button>

how can i set background color to a darker color than default background color?

here is a gif from a page that has what i want: the hover effect

sorry for bad english.

Upvotes: 0

Views: 89

Answers (3)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Try this: 

button {
  position: absolute;
  font-size: x-large;
  border-radius: 25px;
  width: 140px;
  height: 50px;
  margin: 5px;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover{
  width: 200px;
  height: 70px;
  border-radius: 50px;
  filter: saturate(400%);
}

#home-btn {
  background: orange;
}

#panel-btn {
  background: yellowgreen;
  right: 0;
}
<button title="home" id="home-btn" class="fa fa-home"></button>
<button title="panel" id="panel-btn" class="fa fa-key"></button>

Upvotes: 1

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

try this: 

button {
  position: absolute;
  font-size: x-large;
  border-radius: 25px;
  width: 140px;
  height: 50px;
  margin: 5px;
  color: white;
  border: none;
  cursor: pointer;
  filter: brightness(0.8);
}

#home-btn {
  background: orange;
}
#home-btn:hover {
  width: 170px;
  height: 60px;
  border-radius: 30px;
  filter: none;
 }

#panel-btn {
  background: yellowgreen;
  right: 0;
}
#panel-btn:hover {
  width: 170px;
  height: 60px;
   border-radius: 30px;
    filter: none;
 }
<button title="home" id="home-btn" class="fa fa-home"></button>
<button title="panel" id="panel-btn" class="fa fa-key"></button>

Upvotes: 1

connexo
connexo

Reputation: 56754

You can use a CSS filter:

button {
  position: absolute;
  font-size: x-large;
  border-radius: 25px;
  width: 140px;
  height: 50px;
  margin: 5px;
  color: white;
  border: none;
  cursor: pointer;
  transition: filter .2s;
}

button:hover {
  filter: brightness(0.9);
}

#home-btn {
  background: orange;
}

#panel-btn {
  background: yellowgreen;
  right: 0;
}
<button title="home" id="home-btn" class="fa fa-home"></button>
<button title="panel" id="panel-btn" class="fa fa-key"></button>

From what I see in that GIF, it's probably rather increase of saturation that you want:

button {
  position: absolute;
  font-size: x-large;
  border-radius: 25px;
  width: 140px;
  height: 50px;
  margin: 5px;
  color: white;
  border: none;
  cursor: pointer;
  transition: filter .2s;
}

button:hover {
  filter: saturate(400%);
}

#home-btn {
  background: orange;
}

#panel-btn {
  background: yellowgreen;
  right: 0;
}
<button title="home" id="home-btn" class="fa fa-home"></button>
<button title="panel" id="panel-btn" class="fa fa-key"></button>

Upvotes: 2

Related Questions