How to make an element’s background-color a little darker using CSS

by

Add a dark layer on the top of it using background-image. This method keeps your text visible in the same color while changing only the background.

.button {
  display: inline-block;
  color:#fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color:red;
}

.button:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
}
<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

To have a transition:

.button {
  display: inline-block;
  color:#fff;
  padding: 10px 20px;
  font-size: 20px;
  background: linear-gradient(transparent,rgba(0, 0, 0, 0.4)) top/100% 800%;
  background-color:red;
  transition:0.5s;
}

.button:hover {
  background-position:bottom;
}
<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

Another idea with mix-blend-mode:

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
  background-blend-mode: lighten;
}

.button:hover {
  background-blend-mode: darken;
}
<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

More Related Contents:

  1. Change select box option background color
  2. Is it possible to have two background colors for a single html element? [duplicate]
  3. CSS ”background-color” attribute not working on checkbox inside
  4. Color of stacked semi-transparent boxes depends on order?
  5. How to change the style of the title attribute inside an anchor tag?
  6. Word-wrap in an HTML table
  7. Last margin / padding collapsing in flexbox / grid layout
  8. Vertically center two elements within a div [duplicate]
  9. set content height 100% jquery mobile
  10. How to center text vertically with a large font-awesome icon?
  11. Why is a div with “display: table-cell;” not affected by margin?
  12. HTML iframe – disable scroll
  13. Why isn’t object-fit working in flexbox?
  14. Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)
  15. Best way to include CSS? Why use @import?
  16. Overflow:hidden dots at the end
  17. Use Font Awesome icon as CSS content
  18. Bootstrap 4 row fill remaining height
  19. What is the use of style=”clear:both”?
  20. How do I add a tool tip to a span element?
  21. Flex item should align left, not center, when it wraps
  22. Is there a way to use use text as the background with CSS?
  23. Why doesn’t “margin: auto” center an element vertically?
  24. CSS Select box arrow style
  25. z-index not working with position absolute
  26. CSS border color switch animation: “from” color not correct
  27. Pixelated edge around a CSS Circle with overflow: hidden;
  28. Floating Div Over An Image
  29. How can I make Bootstrap 4 columns all the same height? [duplicate]
  30. How to center-justify the last line of text in CSS?

Leave a Comment