section.centered-container
	a(class="link link--arrowed", href="#")
		|Ceci est un magnifique bouton
		svg(class="arrow-icon", xmlns="http://www.w3.org/2000/svg", width="32", height="32", viewBox="0 0 32 32")
			g(fill="none", stroke="#2175FF", stroke-width="1.5", stroke-linejoin="round", stroke-miterlimit="10")
				circle(class="arrow-icon--circle", cx="16", cy="16", r="15.12")
				path(class="arrow-icon--arrow", d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98")
View Compiled
$white:          #FFFFFF;
$black:          #000000;
$whitesmoke:     #F5F5F5;
$link-blue:      #2175FF;

html, body {
	background-color: $whitesmoke;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.centered-container {
	background-color: $white;
	display: inline-flex;
	padding: 4rem;
	border-radius: .125rem;
	border: 1px solid rgba($black, .1);
	box-shadow: 0 .125rem .25rem rgba($black, .04);
}

.link {
	color: $link-blue;
    cursor: pointer;
    font-weight: 400;
	text-decoration: none;
}

.link--arrowed {
	display: inline-block;
    height: 2rem;
    line-height: 2rem;
	
	.arrow-icon {
		position: relative;
		top: -1px;
		-webkit-transition: -webkit-transform 0.3s ease;
		transition: -webkit-transform 0.3s ease;
		transition: transform 0.3s ease;
		transition: transform 0.3s ease, -webkit-transform 0.3s ease;
		vertical-align: middle;
	}
	
	.arrow-icon--circle {
		transition: stroke-dashoffset .3s ease;
		stroke-dasharray: 95;
		stroke-dashoffset: 95;
	}
	
	&:hover {
		.arrow-icon {
			transform: translate3d(5px, 0, 0);
		}
		
		.arrow-icon--circle {
			stroke-dashoffset: 0;
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.