0
Ich habe diesen Code aus Code-Stift, aber ich schaue, stellen Sie sicher, dass der Button IMMER abgerundete Ecken hat. Ich will keine scharfen Ecken. Ich muss vor und nach dem Schweben abgerundete Ecken haben.Wie mache ich den Button abgerundete Ecken während der Animation?
Wie kann ich das tun? Ich bin nicht sicher, wie ich es ändern kann, weil, wenn ich abgerundete Ecken hinzufügte, dann aus irgendeinem Grund eine komische Umrisslinie noch verließ.
<!DOCTYPE.html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
text-align: center;
background: black;
}
a {
color: #000;
text-decoration: none;
text-transform: uppercase;
font-family: Helvetica;
}
a,
span {
font-size: 20px;
}
svg {
width: 230px;
height: 40px;
}
/* THE ROUND PSEUDO-ELEMENT HOVER STYLES */
.round,
.svg,
.highlight {
max-width: 960px;
margin: 0 auto;
}
/* THE SVG HOVER EFFECTS */
.svg .button {
text-decoration: none;
color: #fff;
position: relative;
display: inline-block;
width: 230px;
height: 40px;
margin: 20px;
overflow: hidden;
}
.svg .button:nth-child(3) {
overflow: visible;
position: relative;
top: -20px;
}
.svg .button rect {
position: absolute;
top: 0;
left: 0;
stroke-width: 4px;
stroke-dashoffset: 400px;
stroke: olivedrab;
}
.svg .button span {
color: olivedrab;
width: 230px;
height: 40px;
display: inline-block;
text-align: center;
position: absolute;
left: 0;
top: 0;
line-height: 40px;
transition: all .2s linear;
border-radius: 50px;
}
.svg .button span:hover {
color: #fff;
background: olivedrab;
transition: all 1s cubic-bezier(1.25s 0, 1.15, 1, 1);
transition-delay: .5s;
}
.svg .button:nth-child(1):hover rect {
animation: draw1 .75s linear forwards;
}
@keyframes draw1 {
0% {
stroke-dasharray: 300;
stroke-dashoffset: 700;
stroke-width: 4px;
}
75% {
stroke-dasharray: 900;
stroke-width: 1px;
}
100% {
stroke-dasharray: 900;
stroke-width: 1px;
}
}
</style>
</head>
<body>
<div class="svg">
<a class="button" href="#">
<svg>
<rect height="40" width="230" fill="transparent" />
</svg>
<span>Button1</span>
</a>
</div>
</body>
</html>
'border-radius'? –
Ich habe das bereits versucht, aber es funktioniert nicht richtig, wenn Sie es versuchten – user2891660
yeah, ich habe es nicht versucht, weil Sie es nicht in ein laufendes Schnipsel gemacht haben, also ... zu viel Arbeit, das zu tun ' –