Svg tlačítko v1

by Petr Haluza

HTML

<div class="btn">
        <svg width="200" height="60">
            <rect width="200" height="60" class="rect"></rect>
            <text x="50%" y="50%" fill="red">Odeslat</text>
        </svg>
    </div>

CSS

svg {border:1px solid #eee}
.rect{ fill: transparent; stroke-width: 2; stroke: #ff6348; stroke-dasharray:  160 400; stroke-dashoffset: -100 }
.btn:hover .rect{ animation: go 0.3s linear forwards;}
@keyframes go { to{ stroke-dasharray: 520; stroke-dashoffset: 0; stroke-width: 2} }