Beispielcode einer SVG-Schaltfläche basierend auf einer CSS-Animation

<a href="#">
    <svg>
        <Rechteck></Rechteck>
    Taste
</a>
Körper {
    Rand: 0;
    Polsterung: 0;
    Hintergrund: #000;
}
A {
    Position: absolut;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %, -50 %);
    Breite: 200px;
    Höhe: 60px;
    Zeilenhöhe: 60px;
    Textausrichtung: zentriert;
    Schriftfamilie: serifenlos;
    Texttransformation: Großbuchstaben;
    Schriftgröße: 24px;
    Buchstabenabstand: 4px;
    Farbe: #fff;
    Textdekoration: keine;
}
ein SVG,
ein SVG-Rechteck {
    Position: absolut;
    oben: 0;
    links: 0;
    Breite: 100 %;
    Höhe: 100%;
    Füllung: transparent;
}
A {
    svg rechteckig {
        Strich: #00e2ff;
        Strichstärke: 4;
        Übergang: 2s;
        Strich-Dasharray: 60 200;
        Hub-Schlagschrauber-Höhe: 320;
    }
    &:schweben {
        svg rechteckig {
            Strich: #ff0;
            Strich-Dasharray: 200 60;
            Strich-Dashoffset: 0;
        }
    }
}