CSS 多重渐变从边框发光

Question

你好，我想做类似的设计this使用 CSS。

我尝试使用描述为 here 的伪元素来制作它.我每次都遇到一个问题 - 只有一个渐变框阴影可用或无法为每个点单独设置发光轮廓/边框。我还尝试在椭圆渐变的帮助下阻止发光轮廓:(

有人能告诉我这是否有一些独特的方法吗？

这是我的 code

.wrap{
  height: 20em;
  width: 15em;
  background: black;
}
.btn-t {
  position: relative;
  background: radial-gradient(ellipse at center, blue, blue);
  box-shadow: inset 0 0 0 5px #7B9DFF;
  color: $white-txt;
  height: 4em;
  line-height: 3.75em;
  margin: 1em;
  max-width: 10em;
  padding: 0.25em 1em;
  text-align: center;
  font-size: 20px;
  color: white;
}

.btn-t:after {
  content: '';
    position: absolute;
  width: 95%;
  height: 20%;
  top: 40%;
  right: 0;
  border-right: 5px solid red;
  border-left: 5px solid red;
 }


.btn-t:hover {
  text-shadow: 0px 0px 10px white;
    background: radial-gradient(ellipse at center,  #71B1F5, blue);
}

谢谢。

Answer 1

我试过复制一些接近的东西(一个版本用于文本按钮，一个用于图标版本):

图标版本假定使用 FontAwesome 生成图标(因此 .fa 引用):

/* text button */
.btn-glow {
  border: 1px solid #354a40;
  background-color: #1e2120;
  padding: .5em .85em;
  transition: all 0.025s linear;
  color: #6c8678;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
  font-size: .75em;
  font-weight: bold;
}
.btn-glow:hover {
  color: #e6fcf5;
  text-shadow: 1px 1px 1em #66977b;
  border-image: linear-gradient(90deg, #375345, #9afdcf, #375345) 10;
  background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
}
.btn-glow:focus {
  color: #79c6a1;
  border-image: linear-gradient(90deg, #375345, #9afdcf, #375345) 10;
  background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
  outline: none;
}
.btn-glow:active {
  color: #fff;
  text-shadow: 1px 1px 2em #9ee6bf;
  background-color: #406552;
  border-image: linear-gradient(90deg, #375345, #9afdcf, #375345) 10;
  background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 100%);
}

/* icon version */
.btn-glow-large {
  border: 1px solid #354a40;
  background-color: #1e2120;
  padding: 1em;
  transition: all 0.025s linear;
}
.btn-glow-large .fa {
  color: #6c8678;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
  transition: all 0.025s linear;
}
.btn-glow-large:hover {
  border-image: linear-gradient(#375345, #9afdcf, #375345) 10;
  background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
}
.btn-glow-large:hover .fa {
  color: #e6fcf5;
  text-shadow: 1px 1px 1em #66977b;
}
.btn-glow-large:focus {
  border-image: linear-gradient(#375345, #9afdcf, #375345) 10;
  background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
  outline: none;
}
.btn-glow-large:focus .fa {
  color: #79c6a1;
}
.btn-glow-large:active {
  background-color: #406552;
  border-image: linear-gradient(#375345, #9afdcf, #375345) 10;
  background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 100%);
}
.btn-glow-large:active .fa {
  color: #fff;
  text-shadow: 1px 1px 2em #9ee6bf;
}

参见 https://codepen.io/ablewhite/pen/gWRQLN?editors=1100#0