CSSアニメーションに基づくSVGボタンのサンプルコード

<a href="#">
    <svg>
        <rect></rect>
    ボタン
</a>
体 {
    マージン: 0;
    パディング: 0;
    背景: #000;
}
{
    位置: 絶対;
    上位: 50%;
    左: 50%;
    変換: translate(-50%, -50%);
    幅: 200ピクセル;
    高さ: 60px;
    行の高さ: 60px;
    テキスト配置: 中央;
    フォントファミリー: サンセリフ;
    テキスト変換:大文字;
    フォントサイズ: 24px;
    文字間隔: 4px;
    色: #fff;
    テキスト装飾: なし;
}
SVG、
SVG 矩形 {
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 100%;
    高さ: 100%;
    塗りつぶし: 透明;
}
{
    svg 矩形 {
        ストローク: #00e2ff;
        ストローク幅: 4;
        遷移: 2秒;
        ストロークダッシュ配列: 60 200;
        ストロークダッシュオフセット: 320;
    }
    &:ホバー{
        svg 矩形 {
            ストローク: #ff0;
            ストロークダッシュ配列: 200 60;
            ストロークダッシュオフセット: 0;
        }
    }
}