Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Buttons with animated SVG stroke
<svg id="stroke" xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<path id="line" d="M2 2c49.7 2.6 100 3.1 150 1.7-46.5 2-93 4.4-139.2 7.3 45.2-1.5 90.6-1.8 135.8-.6" fill="none" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
</defs>
</svg>
<div class="container">
<a class="btn" href="/">I am a button with a long name
<svg class="button-stroke" viewBox="0 0 154 13">
<use href="#line"></use>
</svg>
<svg class="button-stroke" viewBox="0 0 154 13">
<use href="#line"></use>
</svg>
</a>
<a class="btn" href="/">Find out more
<svg class="button-stroke" viewBox="0 0 154 13">
<use href="#line"></use>
</svg>
<svg class="button-stroke" viewBox="0 0 154 13">
<use href="#line"></use>
</svg>
</a>
<a class="btn" href="/">Button
<svg class="button-stroke" viewBox="0 0 154 13">
<use href="#line"></use>
</svg>
<svg class="button-stroke" viewBox="0 0 154 13">
<use href="#line"></use>
</svg>
</a>
</div>
* {
box-sizing: border-box;
}
body {
background-color: #263238;
}
.btn {
display: inline-block;
color: white;
min-width: 154px;
text-decoration: none;
margin-right: 50px;
padding: 20px;
position: relative;
text-align: center;
&:hover {
.button-stroke:nth-child(2) {
stroke-dashoffset: 0;
}
}
}
.button-stroke {
display: block;
width: calc(100% - 40px);
height: 20px;
stroke: yellow;
position: absolute;
left: 20px;
bottom: -10px;
stroke-width: 4;
&:nth-child(2) {
stroke-dasharray: 650px;
stroke-dashoffset: 650px;
stroke: darken(#263238, 10%);
stroke-width: 5;
transition: stroke-dashoffset 800ms ease-out;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment