<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br>
<div class=" container">
<a class="e_btn brd_btn--svg js-animated-button" href="#"><span class="brd_btn--svg__label">Hover me !</span>
<svg class="brd_btn--svg__circle" x="0px" y="0px" viewBox="0 0 60 60" enable-background="new 0 0 60 60">
<circle class="js-discover-circle" fill="#ccc" cx="30" cy="30" r="28.7"></circle>
</svg>
<svg class="brd_btn--svg__border" x="0px" y="0px" preserveaspectratio="none" viewBox="2 29.3 56.9 13.4" enable-background="new 2 29.3 56.9 13.4" >
<g class="brd_btn--svg__border--left js-discover-left-border" id="Calque_2">
<path fill="none" stroke="#ccc" stroke-width="0.5" stroke-miterlimit="1" d="M30.4,41.9H9c0,0-6.2-0.3-6.2-5.9S9,30.1,9,30.1h21.4"></path>
</g>
<g class="brd_btn--svg__border--right js-discover-right-border" id="Calque_3">
<path fill="none" stroke="#ccc" stroke-width="0.5" stroke-miterlimit="1" d="M30.4,41.9h21.5c0,0,6.1-0.4,6.1-5.9s-6-5.9-6-5.9H30.4"></path>
</g>
</svg></a>
<br>
<a class="e_btn brd_btn--svg js-animated-button" href="#project"><span class="brd_btn--svg__label">Hover me color !</span>
<svg class="brd_btn--svg__circle" x="0px" y="0px" viewBox="0 0 60 60" enable-background="new 0 0 60 60">
<circle class="js-discover-circle" fill="#ccc" cx="30" cy="30" r="28.7"></circle>
</svg>
<svg class="brd_btn--svg__border" x="0px" y="0px" preserveaspectratio="none" viewBox="2 29.3 56.9 13.4" enable-background="new 2 29.3 56.9 13.4" >
<g class="brd_btn--svg__border--left js-discover-left-border" id="Calque_2">
<path fill="none" stroke="#0FF" stroke-width="0.5" stroke-miterlimit="1" d="M30.4,41.9H9c0,0-6.2-0.3-6.2-5.9S9,30.1,9,30.1h21.4"></path>
</g>
<g class="brd_btn--svg__border--right js-discover-right-border" id="Calque_3">
<path fill="none" stroke="#FF0" stroke-width="0.5" stroke-miterlimit="1" d="M30.4,41.9h21.5c0,0,6.1-0.4,6.1-5.9s-6-5.9-6-5.9H30.4"></path>
</g>
</svg></a>
</div>
</div>
.e_btn {
font-size: 1em;
line-height: 1em;
letter-spacing: 0.04em;
display: inline-block;
}
.brd_btn--svg__circle{
width:100%;}
.brd_btn--svg__border{
width:230px;}
.brd_btn--svg {
position: relative;
height: 52px;
width: 230px;
overflow: hidden;
/* border-radius: 21px;
border:2px solid red;*/
}
.brd_btn--svg:hover{
border:inherit;
}
.brd_btn--svg:hover .brd_btn--svg__circle circle {
-webkit-transform: scale(0);
transform: scale(0);
border:inherit;
}
.brd_btn--svg:hover .brd_btn--svg__label {
color: #00f;
}
.brd_btn--svg:hover .brd_btn--svg__border--left path,
.brd_btn--svg:hover .brd_btn--svg__border--right path {
stroke-dasharray: 61.8204345703125 61.8204345703125;
stroke-dashoffset: 0;
-webkit-transition-delay: 0.25s;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-property: stroke-dashoffset;
-moz-transition-delay: 0.25s;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-in-out;
-moz-transition-property: stroke-dashoffset;
-ms-transition-delay: 0.25s;
-ms-transition-duration: 0.5s;
-ms-transition-timing-function: ease-in-out;
-ms-transition-property: stroke-dashoffset;
transition-delay: 0.25s;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-property: stroke-dashoffset;
}
.brd_btn--svg__label {
-webkit-font-smoothing: antialiased;
font-family: sans-serif;
font-weight: bold;
text-align: center;
color: black;
z-index: 3;
width: 100%;
-webkit-transition: color 0.5s ease-in-out;
transition: color 0.5s ease-in-out;
}
.brd_btn--svg__circle circle {
-webkit-transition: transform 0.5s ease-in-out;
-webkit-transform: scale(1.1);
-webkit-transform-origin: 50% 50%;
-moz-transition: transform 0.5s ease-in-out;
-moz-transform: scale(1.1);
-moz-transform-origin: 50% 50%;
-ms-transition: transform 0.5s ease-in-out;
-ms-transform: scale(1.1);
-ms-transform-origin: 50% 50%;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
transform: scale(1.1);
transform-origin: 50% 50%;
}
.brd_btn--svg__border--left path, .brd_btn--svg__border--right path {
stroke-dasharray: 61.8204345703125 61.8204345703125;
-webkit-transition-duration: 0s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-property: stroke-dashoffset;
-webkit-transition-delay: 0.5s;
-moz-transition-duration: 0s;
-moz-transition-timing-function: ease-in-out;
-moz-transition-property: stroke-dashoffset;
-moz-transition-delay: 0.5s;
-ms-transition-duration: 0s;
-ms-transition-timing-function: ease-in-out;
-ms-transition-property: stroke-dashoffset;
-ms-transition-delay: 0.5s;
transition-duration: 0s;
transition-timing-function: ease-in-out;
transition-property: stroke-dashoffset;
transition-delay: 0.5s;
}
.brd_btn--svg__border--left path {
stroke-dashoffset: -61.8204345703125;
}
.brd_btn--svg__border--right path {
stroke-dashoffset: 61.8204345703125;
}
.brd_btn--svg svg, .brd_btn--svg__label {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-webkit-transform-origin: 50% 50%;
-moz-transform: translate(-50%, -50%);
-moz-transform-origin: 50% 50%;
-ms-transform: translate(-50%, -50%);
-ms-transform-origin: 50% 50%;
transform: translate(-50%, -50%);
transform-origin: 50% 50%;
}
.c-white {
color: white;
}
