无悬停的按钮转换

Question

我创建了一个按钮，当我用鼠标点击它时，它会以所有颜色点亮，因为我设置了悬停属性。

但我希望这个按钮能在没有悬停的情况下无限期地亮起。

我的按钮代码：

function FirstPositionButton() {
return (
<Link to='Pay'>  
<div className="fix">
<button className="btn2">Reach the 1° position!!</button>  
</div>      
</Link>
)}

我的css代码：

.btn2 {
padding: 6px 18px;
border-radius: 4px;
outline: none;
background-color: transparent;
border: 2px solid;
animation: rotate 0.4s linear both infinite;
font-size: 16px;
color: #fff;
}
@keyframes rotate {
100%{
filter: hue-rotate(-360deg)
}}
.btn2:hover{
padding: 6px 18px;
transition: all 0.3s ease-out;
background-color: transparent;
color: #fff;
border-radius: 4px;
border: 2px solid var(--secondary);
}

我试图删除悬停或将转换放入btn2中，但什么都没有出现，所以我该如何解决这个问题？谢谢

Answer 1

我不确定您在哪里定义--secondary。。。价值是什么。你有这样的东西吗？

body{
background: black;
--secondary: green;
}
.btn2 {
padding: 6px 18px;
border-radius: 4px;
outline: none;
background-color: transparent;
border: 2px solid;
animation: rotate 0.4s linear both infinite;
font-size: 16px;
color: #fff;
}
@keyframes rotate {
100% {
filter: hue-rotate(-360deg)
}
}
.btn2:hover {
padding: 6px 18px;
transition: all 0.3s ease-out;
background-color: transparent;
color: #fff;
border-radius: 4px;
border: 2px solid var(--secondary);
}

<div class="fix">
<button class="btn2"> Reach the 1° position!! </button>
</div>

顺便说一句，.btn规则和.btn:hover规则之间的唯一区别是边界颜色。。。也可能是transition的性质，它没有影响。

body{
background: black;
--secondary: green;
}
.btn2 {
padding: 6px 18px;
border-radius: 4px;
outline: none;
background-color: transparent;
border: 2px solid var(--secondary);
animation: rotate 0.4s linear both infinite;
font-size: 16px;
color: #fff;
}
@keyframes rotate {
100% {
filter: hue-rotate(-360deg)
}
}

<div class="fix">
<button class="btn2"> Reach the 1° position!! </button>
</div>

这在文本颜色上也更有趣！

请注意，该过滤器似乎适用于具有不同r、g和b参数的颜色。。。所以在视觉上对#000、#fff、#aaa等颜色没有效果…

body{
background: black;
--secondary: green;
}
.btn2 {
padding: 6px 18px;
border-radius: 4px;
outline: none;
background-color: transparent;
border: 2px solid var(--secondary);
animation: rotate 0.4s linear both infinite;
font-size: 16px;
color: #bc34e8;  /* Whatever color... */
}
@keyframes rotate {
100% {
filter: hue-rotate(-360deg)
}
}

<div class="fix">
<button class="btn2"> Reach the 1° position!! </button>
</div>