Question

我必须要做一个按钮设计，但我做不到。你能帮忙吗？当边界悬停时，它需要生效。需要一个类似于下面图片链接的按钮。我没有在图片中看到图像。

我想做：（https://pasteboard.co/I8gudAg.png）

我做到了：

.btnc-secondary {
    font-size: 18px;
    padding: 10px 30px;
    background: #f93140;
    border-style: solid;
    border-width: 1px;
    outline-offset: -6px;
    outline: 1px solid #ffffff;
    border-radius: 0;
    position: relative;
    color: #ffffff;
}
.btnc-secondary:hover:after,
.btnc-secondary.active:after {
    transition-delay: 0.2s;
    transition: all 0.2s linear;
    border-image-source: linear-gradient(98deg, #f93140, #f50a68);
}

.btnc-secondary[disabled] {
    background: #ededed;
    border: 1px solid #a0a0a0 !important;
    outline-color: #3f3f3f;
    color: #3d3d3d;
  
}

.btnc-secondary:active:after,
.btnc-secondary:active:before,
.btnc-secondary:after,
.btnc-secondary:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 70%;
    height: 50%;
    border-left: 1px solid #ff8a93;
    border-top: 1px solid #ff8a93;
    margin: 4px;
    transition: all 0.2s linear;
}

.btnc-secondary:hover,
.btnc-secondary.active {
    background: #ffffff;
    outline-color: #f50a68;
    color: #f93140;
    transition: all 0.2s linear;
}

.btnc-secondary.active {
    transition: all 0.2s linear;
    background-image: -webkit-linear-gradient(6deg, #c20101, #bc070e) !important;
    background-image: -o-linear-gradient(6deg, #c20101, #bc070e) !important;
    background-image: linear-gradient(84deg, #c20101, #bc070e) !important;
}

.btnc-secondary:active {
    background: #ff0013;
    outline-color: #ffffff !important;
    color: #ffffff;
    transition: all 0.2s linear;
}

<br><br><br><br>


<a class="btn btnc-secondary btn-sm fs-14 font-opensans" href="#">Title</a>

Answer 1

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

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

动画需要3秒钟，但是您可以通过更改--t的值将其更改为所需的值。

我正在使用hsl颜色，并且正在更改亮度以更改颜色。

我希望这就是你要的。

body{--t:3s}/*time*/

rect{stroke:hsl(254,57%,55%);}


svg{background:hsl(254,57%,95%);
  transition:all var(--t) ease;
  font-family:Arial;
  
}
text{text-anchor:middle;
  pointer-events:none;
  fill:hsl(254,57%,45%);
  transition:all var(--t) ease-in-out; 
}


.shape{
  fill:none;
  stroke:hsl(254,57%,45%);
  stroke-dasharray:95px;
  stroke-dashoffset:95px;
  transition:all var(--t) ease;  
}

/*HOVER*/

svg:hover{background:hsl(254,57%,55%)}

svg:hover .shape{
  stroke:hsl(254,57%,75%);
  stroke-dasharray:380px;
  stroke-dashoffset:0px;
}

svg:hover text{fill:hsl(254,57%,95%)}

 <a href="">
 <svg viewBox="-5 -5 160 50" >
   <rect  height="40" width="150" fill="none" stroke-width=".5"  />
   <path class="shape" d="M60,0L150,0 150,40 0,40 0,0 60,0"  />
   <text x="75" y="25" >Button 1</text>
</svg></a>

我在制作按钮时遇到麻烦

1 个答案: