Question

您好我想使用CSS制作类似this的设计。

我尝试使用描述为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

我已经开始复制一些东西（文本按钮的一个版本，图标版本的一个版本）：

Icon版本假设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

CSS边框多个渐变发光

1 个答案: