<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 ----------> <a class="btn btn--svg js-animated-button" href="#project"><span class="btn--svg__label">Hover me !</span> <svg class="btn--svg__circle" width="190" x="0px" y="0px" viewBox="0 0 60 60" enable-background="new 0 0 60 60"> <circle class="js-discover-circle" fill="#FFFFFF" cx="30" cy="30" r="28.7"></circle> </svg> <svg class="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" width="190"> <g class="btn--svg__border--left js-discover-left-border" id="Calque_2"> <path fill="none" stroke="#FFF" 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="btn--svg__border--right js-discover-right-border" id="Calque_3"> <path fill="none" stroke="#FFF" 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>

body { background: black; text-align: center; padding: 50px; -ms-box-sizing: border-box; box-sizing: border-box; } .btn { font-size: 1em; line-height: 1em; letter-spacing: 0.04em; display: inline-block; } .btn--svg { position: relative; height: 42px; width: 190px; overflow: hidden; border-radius: 21px; } .btn--svg:hover .btn--svg__circle circle { transform: scale(0); } .btn--svg:hover .btn--svg__label { color: #fff; } .btn--svg:hover .btn--svg__border--left path, .btn--svg:hover .btn--svg__border--right path { stroke-dasharray: 61.8204345703 61.8204345703; 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; } .btn--svg__label { -webkit-font-smoothing: antialiased; font-family: sans-serif; font-weight: bold; text-align: center; color: black; z-index: 3; width: 100%; transition: color 0.5s ease-in-out; } .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%; transition: transform 0.5s ease-in-out; transform: scale(1.1); transform-origin: 50% 50%; } .btn--svg__border--left path, .btn--svg__border--right path { stroke-dasharray: 61.8204345703 61.8204345703; -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; } .btn--svg__border--left path { stroke-dashoffset: -61.8204345703; } .btn--svg__border--right path { stroke-dashoffset: 61.8204345703; } .btn--svg svg, .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; } .trailer { margin-bottom: 40px; } .trailer--nano { margin-bottom: 10px; } a { position: relative; text-decoration: none; color: red; } a:after { content: ""; height: 1px; bottom: -4px; position: absolute; left: 5%; right: 95%; background: red; transition: right 0.25s ease-in-out; } a:hover:after { right: 5%; } .teasing-1, .heading-2 { font-family: sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: antialiased; } .teasing-1 { font-size: 14px; line-height: 14px; } .heading-2 { font-weight: bold; font-size: 20px; line-height: 20px; text-transform: uppercase; }