如何用AI复刻按钮CSS样式

如何用CSS复刻一个按钮样式呢，这里有个省力的方式，不用设计，只需要一个AI工具。

按钮图例

工具： 豆包网页版

制作步骤

将图片上传到豆包，并输入如下提示词：

帮我实现图纸按钮的样式，css

生成结果如下图，生成的结果和参照样式有些差别，少了顶部、底部等灯光信息，于是…

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
body {
  background-color: #183480;
  padding:40px;
}
.jelly-btn {
  /* 胶囊圆角 */
  padding: 16px 72px;
  border-radius: 999px;
  border: 1px solid rgba(130,210,255,0.55);
  /* 蓝色渐变底色 */
  background: linear-gradient(180deg, #2068d8 0%, #0c3b94 100%);
  /* 内外双层阴影实现果冻发光边缘 */
  box-shadow:
    inset 0 2px 12px rgba(145, 220, 255, 0.45),
    inset 0 -3px 10px rgba(0,30,90,0.6),
    0 0 8px rgba(60,175,255,0.35);
  font-size:42px;
  color:#e0f4ff;
  font-weight:bold;
  /* 文字微弱外发光 */
  text-shadow: 0 0 6px #82d2ff;
  cursor:pointer;
}
.jelly-btn:hover{
  filter: brightness(1.12);
}
.jelly-btn:active{
  filter: brightness(0.92);
  box-shadow:
    inset 0 -2px 12px rgba(145, 220, 255, 0.45),
    inset 0 3px 10px rgba(0,30,90,0.6),
    0 0 8px rgba(60,175,255,0.35);
}
</style>
</head>
<body>
<button class="jelly-btn">默认</button>
</body>
</html>

追加提示词，补上灯光信息，提示词如下：

参照图片上的灯光信息缺失了，帮我补上

生成结果如下图，灯光信息是有了，但是很难看，位置、大小等也不一致，于是…

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
body {
  background-color: #153075;
  padding: 60px;
}
.jelly-btn {
  position: relative;
  padding: 18px 80px;
  border-radius: 9999px;
  border: 1px solid rgba(110, 200, 255, 0.48);
  background: linear-gradient(180deg, #1c62d2 0%, #093286 100%);
  box-shadow:
    inset 0 0 14px rgba(120, 205, 255, 0.32),
    0 0 10px rgba(40, 160, 255, 0.28);
  font-size: 44px;
  color: #e6f6ff;
  font-weight: bold;
  text-shadow: 0 0 7px #74c8ff;
  cursor: pointer;
  overflow: hidden;
}
/* 顶部横向高光带 */
.jelly-btn::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: 8%;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  opacity: 0.85;
}
/* 底部横向高光带 */
.jelly-btn::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 8%;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #80d8ff, transparent);
  opacity: 0.75;
}
.jelly-btn:hover {
  filter: brightness(1.13);
}
.jelly-btn:active {
  filter: brightness(0.91);
}
</style>
</head>
<body>
<button class="jelly-btn">默认</button>
</body>
</html>

实现原理已经有了，剩下的小改动自己来吧，调整下灯光的宽度、高度、位置等内容，看起来效果还可以，虽然还有些差别，但可以接受，最终如下
按钮

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
body {
  background-color: #153075;
  padding: 60px;
}
.jelly-btn {
  position: relative;
  padding: 18px 80px;
  border-radius: 9999px;
  border: 1px solid rgba(110, 200, 255, 0.48);
  background: linear-gradient(180deg, #1c62d2 0%, #093286 100%);
  box-shadow:
    inset 0 0 14px rgba(120, 205, 255, 0.32),
    0 0 10px rgba(40, 160, 255, 0.28);
  font-size: 44px;
  color: #e6f6ff;
  font-weight: bold;
  text-shadow: 0 0 7px #74c8ff;
  cursor: pointer;
  overflow: hidden;
}
/* 顶部横向高光带 */
.jelly-btn::before {
  content: '';
  position: absolute;
  left: 12%;
  top: 0px;
  width: 76%;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  opacity: 0.85;
}
/* 底部横向高光带 */
.jelly-btn::after {
  content: '';
  position: absolute;
  left: 12%;
  bottom: 0;
  width: 76%;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #80d8ff, transparent);
  opacity: 0.75;
}
.jelly-btn:hover {
  filter: brightness(1.13);
}
.jelly-btn:active {
  filter: brightness(0.91);
}
</style>
</head>
<body>
<button class="jelly-btn">默认</button>
</body>
</html>

如何用AI复刻按钮CSS样式

制作步骤

心态致胜 -- 超越评判、释放潜能的内在秘诀

用 AI 制作图片打码脱敏工具