Buttons with animated SVG stroke

buttons-with-animated-svg-stroke.markdown

Buttons with animated SVG stroke

A Pen by Michelle Barker on CodePen.

License.

index.html

<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>

style.scss

* {
	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;
	}
}