我有一个按钮的以下CSS:
.Button {
background-color: #somehex;
}
当用户将鼠标悬停在按钮上时,我希望
background-color
更暗一点。我试过改变不透明度,但没有用,目前正在这样做:
.Button:hover {
transition: 0.2s ease-in;
background-color: #ALittleDarkerHex;
}
虽然这个过程有效,但它真的很乏味,因为我必须手动寻找我正在使用的颜色的深色版本。我想知道是否有更简单的方法来使用 CSS 使按钮的
background-color
变暗。
使用
background-image
在它的顶部添加一个深色层。此方法使您的文本以相同的颜色可见,同时仅更改背景。
.button {
display: inline-block;
color: #fff;
padding: 10px 20px;
font-size: 20px;
background-color: red;
}
.button:hover {
background-image: linear-gradient(rgb(0 0 0/40%) 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>
过渡:
.button {
display: inline-block;
color: #fff;
padding: 10px 20px;
font-size: 20px;
background: linear-gradient(#0000, rgb(0 0 0/40%)) 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>
mix-blend-mode 的另一个想法:
.button {
display: inline-block;
color: #fff;
padding: 10px 20px;
font-size: 20px;
background-color: red;
background-image: linear-gradient(rgb(0 0 0/40%) 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>
你也可以考虑一个大的 inset box-shadow,你也可以添加过渡:
.button {
display: inline-block;
color: #fff;
padding: 10px 20px;
font-size: 20px;
background-color: red;
box-shadow: 0 0 0 100vmax inset rgb(0 0 0/var(--o,0%));
transition: .4s;
}
.button:hover {
--o: 40%;
}
<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>
这是您可以做到的一种方法
.button {
background-color: red;
}
.button:hover {
filter: brightness(60%);
}
<button class="button">Button</button>
高于
brightness(100%)
的任何东西都会增加亮度,任何低于它的东西都会使它变暗。
您可以考虑使用HSL色值,这样更能满足您的需求。与十六进制颜色代码 (
#FF0033
) 相比,HSL 颜色模型更容易被人类阅读和理解。
HSL 颜色值指定为:
.hsl(hue, saturation, lightness)
div {
width: auto;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0.5rem 0;
padding: 1rem 2rem;
color: white;
}
.Button {
--hue: 348;
--saturation: 100%;
--lightness: 50%;
background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}
.Button.dark:hover {
transition: 0.2s ease-in;
--lightness: 40%;
/* 20% dark */
}
.Button.light:hover {
transition: 0.2s ease-in;
--lightness: 80%;
/* 20% light */
}
<div class='Button dark'>PayPay</div>
<div class='Button light'>PayPay</div>
将伪元素放在按钮内容后面并在悬停时修改其不透明度
const colors = ['#052F5F','#005377','#06A77D','#D5C67A','#F1A208'];
const btn = document.querySelector('.Button');
btn.addEventListener('click', (e) => {
e.preventDefault();
btn.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
});
.Button {
background-color: #F1A208;
color:#fff;
border: 0;
border-radius: 20px;
padding: 10px 22px;
cursor:pointer;
position: relative;
}
.Button:before {
content: '';
position: absolute;
z-index:0;
border-radius: 20px;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0);
transition: .2s ease;
}
.Button span {
position: relative;
z-index:1;
}
.Button:hover:before {
background-color: rgba(0,0,0,.3);
}
<button class="Button"><span>hover me</span></button>