如何为带有渐变边框的圆形轮廓按钮设置悬停答案

【问题标题】：How to set hover for rounded outline button w/ gradient border如何为带有渐变边框的圆形轮廓按钮设置悬停
【发布时间】：2021-04-07 02:11:46
【问题描述】：

我需要的是：

按钮必须是圆形的；
按钮必须使用线性渐变（按钮 A 在其边框上，按钮 B 作为背景颜色）；
在 :hover 上不透明度必须更改为 0.5 [在纯色按钮上工作正常，但我不知道如何使它在轮廓一上正常工作（只有可见边框的不透明度应该改变）]。

所以，我的主要问题是：

如何更改 :hover 在第一个按钮上的不透明度？
按钮 B 上出现奇怪的水平线是怎么回事（即，为什么简单地将边框颜色设置为透明不会使按钮成为纯色（渐变）颜色），我该如何解决这个问题？

What I've got so far

.btn-default {
  border-radius: 22px;
  text-transform: uppercase;
  border: solid 2px;
}

.btn-default:hover {
  opacity: 0.5;
}

.btn-filled{
  background: linear-gradient(180deg, #BC9CFF 0%, #8BA4F9 100%);
  color: #FFFFFF;
  border-color: transparent;
}

.btn-outline {
  position:relative;
  box-sizing: border-box;
    
  background-clip: padding-box;
  border: transparent;
  
  color: #BC9CFF;
  background: white;
}

.btn-outline:before {
  content:'';
  position: absolute;
  top:0px; right:0px; bottom:0px; left: 0px;
  background: linear-gradient(180deg, #BC9CFF 0%, #8BA4F9 100%);  
  z-index: -1;
  margin: -2px;
  border-radius: inherit;
}

<!-- button A -->
<button type="button" name="button" class="btn-default btn-outline">click me</button>
<!-- button B -->
<button type="button" name="button" class="btn-default btn-filled">click me</button>

What I'm trying to recreate

【问题讨论】：

附注：将第一个按钮悬停时的文本颜色更改为白色..

标签： css

【解决方案1】：

分离悬停条件以像这样定位轮廓上的:before伪元素。

.btn-default,
.btn-outline{
  border-radius: 22px;
  text-transform: uppercase;
  border: solid 2px;
}

.btn-default:hover {
  opacity: 0.5;
}

.btn-outline:hover:before {
  opacity: .5;
}

.btn-filled{
  background: linear-gradient(180deg, #BC9CFF 0%, #8BA4F9 100%);
  color: #FFFFFF;
  border-color: transparent;
}

.btn-outline {
  position:relative;
  box-sizing: border-box;
    
  background-clip: padding-box;
  border: transparent;
  
  color: #BC9CFF;
  background: white;
}

.btn-outline:before {
  content:'';
  position: absolute;
  top:0px; right:0px; bottom:0px; left: 0px;
  background: linear-gradient(180deg, #BC9CFF 0%, #8BA4F9 100%);  
  z-index: -1;
  margin: -2px;
  border-radius: inherit;
}

<!-- button A -->
<button type="button" name="button" class="btn-outline">click me</button>
<!-- button B -->
<button type="button" name="button" class="btn-default btn-filled">click me</button>

【讨论】：