创建一个边框带有动画渐变的按钮

Question

我目前正在构建一个网站，我想创建一个包含以下元素的按钮：

黑色背景
白色文字
边框上的动画渐变
边界模糊

这个想法是得到一个看起来像这样的按钮：

很抱歉我无法获得更好的质量或示例

我设法得到以下结果：

（实际上是动画）

这是我当前使用的代码：

@keyframes gradient {
    to {
      background-position: 200% center;
    }
}

#degradebtn {
  position: relative;
  background: black;
  color: white;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  z-index: 1;
}

#degradebtn::before {
  content: "";
  position: absolute;
  top: -6px; 
  left: -6px; 
  right: -6px; 
  bottom: -6px; 
  background: linear-gradient(45deg, red, yellow, lime, cyan, blue, magenta, red);
  background-size: 800% auto;
  z-index: -1;
  animation: gradient 8s infinite linear;
  box-shadow: 0 0 5px 3px rgba(0,0,0,0.5);
  overflow: hidden;
}

我真的不知道我现在能做什么，我之前没有看到其他人问过这个问题。

任何帮助将不胜感激。谢谢。

Answer 1

看起来

border-radius

和

filter:blur()

是获得所需结果所需的缺失属性

body {
  margin: 30px;
}

@keyframes gradient {
  to {
    background-position: 200% center;
  }
}

#degradebtn {
  position: relative;
  background: black;
  color: white;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 25px;
  outline: none;
  overflow: hidden;
  z-index: 1;
}

#degradebtn::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  background: linear-gradient(45deg, red, yellow, lime, cyan, blue, magenta, red);
  background-size: 800% auto;
  border-radius: 25px;
  z-index: -1;
  animation: gradient 8s infinite linear;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  filter: blur(8px);
}

<body>
  <a id="degradebtn">See in action</a>
</body>

创建一个边框带有动画渐变的按钮

问题描述投票：0回答：1

1个回答

最新问题

创建一个边框带有动画渐变的按钮

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1