6

SVG Button Stroke Animation - Online Tutorials

 3 years ago
source link: http://misaka.im/index.php/archives/36/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

SVG Button Stroke Animation - Online Tutorials

2018.09.28默认分类 0 评

请输入图片描述

<a href="#">
    <svg>
        <rect></rect>
    </svg>Button
</a>

body {
    margin: 0;
    padding: 0;
    background: #000;
}

a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: 4px;
    color: #fff;
    text-decoration: none;
}

a svg,
a svg rect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: transparent;
}

a {
    svg rect {
        stroke: #00e2ff;
        stroke-width: 4;
        transition: 2s;
        stroke-dasharray: 60 200;
        stroke-dashoffset: 320;
    }

    &:hover {
        svg rect {
            stroke: #ff0;
            stroke-dasharray: 200 60;
            stroke-dashoffset: 0;
        }
    }
}
Sass (Sass)

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK