<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 ----------> <div class="container"> <div class="row hire-inquery double-items"> <a> afasf;lkalsk</a> </div> <div class="hiring-modal-heading"><p></p></div> </div>

.hire-inquery a { display: block; font-family: Poppins-Medium; font-size: 20px; font-weight: 500; color: #fff; padding: 8px 35px; border-radius: 100px; text-transform: uppercase; background: #de0c4f; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative } @-webkit-keyframes hvr-ripple-out { 100% { top:-12px; right:-12px; bottom:-12px; left:-12px; opacity:0 } } @keyframes hvr-ripple-out { 100% { top:-12px; right:-12px; bottom:-12px; left:-12px; opacity:0 } } .hire-inquery a { display: block; font-family: Poppins-Medium; font-size: 20px; font-weight: 500; color: #fff; padding: 8px 35px; border-radius: 100px; text-transform: uppercase; background: #de0c4f; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative } .hire-inquery a:hover:before { content: ''; position: absolute; border: #de0c4f solid 4px; top: 0; right: 0; bottom: 0; left: 0; border-radius: 100px; -webkit-animation-duration: 1s; animation-duration: 1s } .hire-inquery a:hover:before, .hire-inquery a:focus:before { -webkit-animation-name: hvr-ripple-out; animation-name: hvr-ripple-out } .double-items { transform: translateY(40px); animation: fadeInText 400ms 0ms forwards; } @keyframes fadeInText { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .hiring-modal-heading p { position: relative; width: 80%; background-color: black; height: 2px; margin: 30px auto; } .hiring-modal-heading p:after { content: ""; width: 20px; height: 20px; display: inline-block; background: black; position: absolute; bottom: -9px; left: 0; right: 0; margin: 0 auto; border-radius: 10px; border: 6px solid white; } :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }