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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.