实现无背景图的响应式悬停扫描动画按钮（匹配给定设计）

我需要制作一个悬停时带有扫描动画的按钮，效果如下：

最初用SVG背景图实现了效果，但现在要移除SVG依赖，制作纯CSS的响应式按钮。以下是我的初始代码，以及修改后的实现方案：

初始代码 #

HTML #

<button class="tkdbtn" onclick="location.href='./index.html'"><span class="tkdbtn-inner">Learn More</span></button>

初始CSS（含SVG背景） #

.tkdbtn:after,
.tkdbtn:before {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tkdbtn {
  padding: 15px;
  outline: none;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 240.37 72.15"><defs><style> .cls-1 { fill: none; stroke: %23000; stroke-miterlimit: 10; stroke-width: 3px; } .cls-2 { fill: %23daf9d7; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-2" x="8.15" y="9.25" width="232.22" height="62.9" rx="31.45" ry="31.45"></rect><rect class="cls-1" x="1.5" y="1.5" width="233.73" height="62.9" rx="31.45" ry="31.45"></rect></g></svg>') no-repeat center center;
  background-size: contain;
  transition: 0.3s;
  border: none;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
}

.tkdbtn .tkdbtn-inner {
  display: block;
  position: relative;
  z-index: 2;
}

.tkdbtn:after {
  box-shadow: rgb(212 207 201 / 75%) 0 0 15px 2px;
  background: #000000;
  content: "";
  height: 1px;
  opacity: 0;
}

.tkdbtn:before {
  content: "";
  opacity: 0;
}

.tkdbtn:hover {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 240.37 72.15"><defs><style> .cls-1 { fill: none; stroke: %23000; stroke-miterlimit: 10; stroke-width: 3px; } .cls-2 { fill: %23daf9d7; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-2" x="8.15" y="9.25" width="232.22" height="62.9" rx="31.45" ry="31.45"></rect><rect class="cls-1" x="1.5" y="1.5" width="233.73" height="62.9" rx="31.45" ry="31.45"></rect></g></svg>') no-repeat center center;
  background-size: contain;
  color: #000000; /* Ensure text color stays the same */
}

.tkdbtn:hover:before {
  opacity: 1;
}

.tkdbtn:hover:after {
  animation: scan 2s infinite;
  opacity: 1;
}

@keyframes scan {
  0% {
    top: 0;
  }
  50% {
    top: 100%;
  }
  100% {
    top: 0;
  }
}

修改后的无SVG实现方案 #

HTML（结构保持不变） #

<button class="tkdbtn" onclick="location.href='./index.html'"><span class="tkdbtn-inner">Learn More</span></button>

纯CSS实现（移除SVG依赖，响应式适配） #

.tkdbtn:after,
.tkdbtn:before {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tkdbtn {
  padding: 15px 40px; /* 调整内边距让按钮更灵活 */
  outline: none;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  background-color: #daf9d7; /* 替换SVG填充色 */
  border: 3px solid #000; /* 模拟SVG边框 */
  border-radius: 32px; /* 匹配SVG圆角 */
  transition: 0.3s;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
}

.tkdbtn .tkdbtn-inner {
  display: block;
  position: relative;
  z-index: 2;
}

.tkdbtn:after {
  box-shadow: rgb(212 207 201 / 75%) 0 0 15px 2px;
  background: #000;
  content: "";
  height: 1px;
  opacity: 0;
}

.tkdbtn:hover:after {
  animation: scan 2s infinite;
  opacity: 1;
}

@keyframes scan {
  0% {
    top: 0;
  }
  50% {
    top: 100%;
  }
  100% {
    top: 0;
  }
}

关键修改说明 #

• 用background-color替代SVG的填充色，border模拟SVG的描边，border-radius匹配原SVG的圆角值
• 调整padding为左右更大的数值，让按钮内容自适应，保持响应式
• 移除了原CSS中冗余的:before相关样式（原代码中未实际使用）
• 保留了原有的扫描动画逻辑，确保悬停效果一致

内容的提问来源于stack exchange，提问作者Gelebrin