Dynamically change color to lighter or darker by percentage CSS (Javascript)

后端 未结 24 1801
-上瘾入骨i
-上瘾入骨i 2020-11-28 01:12

We have a big application on the site and we have a few links which are, let\'s say blue color like the blue links on this site. Now I want to make some other links, but wit

24条回答
  •  予麋鹿
    予麋鹿 (楼主)
    2020-11-28 01:49

    You can do this with CSS filters in all modern browsers (see the caniuse compatibility table).

    .button {
      color: #ff0000;
    }
    
    /* note: 100% is baseline so 85% is slightly darker, 
       20% would be significantly darker */
    .button:hover {
      filter: brightness(85%);
    }

    Here's more reading from CSS Tricks about the various filters you can use: https://css-tricks.com/almanac/properties/f/filter/

提交回复
热议问题