"round border on btn hover"
Bootstrap 4.1.1 Snippet by soumen

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

Related: See More


Questions / Comments: