Html I'；我做纽扣有困难

我要做一个按钮设计怎么做，但我做不到。你能帮忙吗？ 当边界悬停时，它需要作为效果到达。需要像下面的图片链接这样的按钮。我没有得到照片中的图像

我想做： （）

我制作：

.btnc二级{
字号：18px；
填充：10px 30px；
背景#f93140；
边框样式：实心；
边框宽度：1px；
轮廓偏移：-6px；
外形：1px实心#ffffff；
边界半径：0；
位置：相对位置；
颜色：#ffffff；
}
.btnc辅助：悬停：之后，
.btnc辅助。活动：之后{
过渡延迟：0.2s；
过渡：所有0.2s线性；
边界图像源：线性梯度（98度，#f93140，#f50a68）；
}
.btnc辅助[禁用]{
背景：#ededed；
边框：1px实心#A0！重要；
轮廓颜色：#3f3f；
颜色：#3d3d；
}
.btnc辅助：活动：之后，
.btnc辅助：激活：在，
.btnc次要：之后，
.btnc辅助：之前{
内容：“；
位置：绝对位置；
左：0；
排名：0；
宽度：70%；
身高：50%；
左边框：1px实心#ff8a93；
边框顶部：1px实心#ff8a93；
保证金：4倍；
过渡：所有0.2s线性；
}
.btnc辅助：悬停，
.btnc-secondary.active{
背景：#ffffff；
轮廓颜色：#f50a68；
颜色：#f93140；
过渡：所有0.2s线性；
}
.btnc-secondary.active{
过渡：所有0.2s线性；
背景图片：-webkit线性渐变（6度，#c20101，#bc070e）！重要；
背景图像：-o线性梯度（6度，#c20101，#bc070e）！重要；
背景图像：线性梯度（84度，#c20101，#bc070e）！重要；
}
.btnc辅助：激活{
背景：#ff0013；
轮廓颜色：#ffffff！重要；
颜色：#ffffff；
过渡：所有0.2s线性；
}

您在注释中给出的示例有缺陷，因为它在SVG元素中使用了div

接下来是我的例子。它是一个svg元素，将采用其父元素的宽度。如果愿意，可以为svg提供固定的宽度

动画需要3秒，但您可以通过更改

--t

我正在使用

hsl

颜色，我正在更改亮度以更改颜色

我希望这就是你要问的

body{--t:3s}/*时间*/
直脑卒中：hsl（254,57%，55%）
背景：hsl（254,57%，95%）；
过渡：所有var（--t）缓解；
字体系列：Arial；
}
文本{文本锚定：中间；
指针事件：无；
填充：hsl（254,57%，45%）；
转换：所有var（--t）均易于输入输出；
}
.形状{
填充：无；
卒中：hsl（254,57%，45%）；
笔划阵列：95px；
行程偏移：95px；
过渡：所有var（--t）缓解；
}
/*盘旋*/
svg:hover{背景：hsl（254,57%，55%）}
svg:hover.shape{
卒中：hsl（254,57%，75%）；
行程：380px；
行程偏移：0px；
}
svg：悬停文本{fill:hsl（254,57%，95%）}

---

您正在使用

svg

标记和

svg animate

标记，但代码中没有svg。您想在哪里使用svg动画？我想用svg制作按钮。例如：（）