CODEWITHSUNDEEP
javascriptjqueryhtmlcsscolors
Shafizadeh
Shafizadeh

Reputation: 10340

How can I make the color of an element more dark on :hover?

I have multiple elements in my webpage. For example multiple buttons (which have red background color), links (which have blue background color) and etc ... .

I need to change the color of them on :hover. Currently I do that like this:

button{
  background-color: red;
}

button:hover {
   background-color: #c80020;
}

a {
  color: blue;
}

a:hover {
  color: #082767;
  cursor: pointer;
}
<button>button</button>
<a>link</a>

As you see, I use a more dark color than element's color on :hover.

All I want to know, Isn't there any color (or approach) to just makes an element more dark than what it is? I don't have any specific color. actually I don't care about any exact color, I just want to make an element more dark on :hover, just that. Any suggestion?

Upvotes: 1

Views: 3010

Answers (4)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

If your using SASS, you can make use of the darken method to achieve the same

SASS way below

button{
  background-color: red;
}

button:hover {
   background-color: darken(red, 10%);
}

CSS neat way below(CSS3)

The best among pure CSS way, I would suggest is using HSLA(Hue Saturation Lightness and alpha), this is a CSS3 feature which you can check out here. For you it should look like

button{
 background-color: hsla(0, 100%, 50%, 1);
}

button:hover {
  background-color: hsla(0, 100%, 38%, 1);
}

CSS ugly way below(I am sure nobody would read this)

If you want more CSS approach for this, there are few options which you can try from here

Codepen example

These includes

  • adding a box-shadow & removing it on hover
  • adding 1px translucent gif & remove it on hover
  • background created as psuedo-element & it's opacity changes on hover

These are more like hacks according to me & I would not recommend but options are open :-)

Upvotes: 3

Andreas Boyer
Andreas Boyer

Reputation: 82

You could use hsla instead of hex-colors.

example:

button{
 background-color: hsla(356, 98%, 46%, 1);
}

button:hover {
  background-color: hsla(356, 98%, 26%, 1);
}
<button>button</button>

Upvotes: 3

Jeanclaude
Jeanclaude

Reputation: 58

no, the best way is to change the color, but you can use greyscale(but i don't recommend it)

button{
  background-color: red;
}

button:hover {
   background-color: #c80020;
}

a {
  color: blue;
}

a:hover {-webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}
<button>button</button>
<a>link</a>

Upvotes: 0

Jurntje
Jurntje

Reputation: 51

Maybe this is what you're looking for:

html

<div class="image">
    <div class="overlay"></div>
</div>

css

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    position:relative;
}
.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

http://jsfiddle.net/6bjTQ/

Upvotes: -1

Related Questions