<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 ----------> <nav class="btn-pluss-wrapper"> <h2 class="tooltip">Look!</h2> <div href="#" class="btn-pluss"> <ul> <li><a href="#about">About me</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </nav>

body { background-color: #999; display: flex; align-items: center; justify-content: center; height: 100vh; background: salmon; font-family: sans-serif; } * { box-sizing: border-box; } section { position: relative; } .btn-pluss { overflow: hidden; position: relative; display: block; padding-left: 5px; padding-right: 5px; border-radius: 22px; width: 30px; margin: 0 auto; background-color: white; transition: width .3s .5s ease, border-radius 1.1s ease; } .btn-pluss a { display: block; position: relative; color: #FA434B; text-decoration: none; overflow: hidden; padding: 5px; border-radius: 5px; } .btn-pluss a:hover { text-decoration: inherit; color: white; background-color: #FA434B; transition: background-color .5s ease; } .btn-pluss:after { content: '+'; position: absolute; top: 50%; left: 50%; display: block; height: 20px; width: 20px; border-radius: 100%; line-height: 20px; text-align: center; font-size: 1.1rem; background-color: #FA434B; color: white; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); transition: all .3s .5s ease; cursor: pointer; cursor: hand; } .btn-pluss ul { opacity: 0; } .btn-pluss ul { margin-top: 15px; opacity: 0; width: 100%; margin-left: 0px; transition: all .5s ease; text-align: center; font-size: 0.9rem; } .btn-pluss ul li { background-color: #e4e4e4; margin-top: 5px; border-radius: 5px; width: 100%; height: 0px; overflow: hidden; transition: height 1s ease; } .tooltip { position: relative; padding: 5px; border-radius: 5px; width: 70px; text-align: center; font-size: 0.9rem; font-weight: bold; margin: 0 auto; margin-bottom: 15px; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-name: jump; animation-name: jump; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-color: #fff; color: #FA434B; transition: all 1s ease; pointer-events: none; } .tooltip::after { content: ''; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); display: block; height: 10px; width: 10px; left: 0; right: 0; margin: 0 auto; background-color: inherit; } .tooltip::before { content: ''; color: white; } .btn-pluss-wrapper:hover .tooltip { -webkit-animation-duration: 0s; animation-duration: 0s; transition: all 1s ease; color: white; width: 90px; } .btn-pluss-wrapper:hover .tooltip::before { content: 'Choose!'; display: block; color: #FA434B; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all 1s .3s ease; } .btn-pluss-wrapper:hover .btn-pluss { width: 150px; border-radius: 15px; padding-bottom: 5px; transition: width .3s ease, border-radius .3s ease, padding-bottom .3s ease; } .btn-pluss-wrapper:hover .btn-pluss::after { transition: all .3s ease; left: 50%; top: 10px; -webkit-transform: translateY(-5px) translateX(-50%); transform: translateY(-5px) translateX(-50%); } .btn-pluss-wrapper:hover .btn-pluss ul { opacity: 1; margin-top: 30px; transition: all 1s ease; } .btn-pluss-wrapper:hover .btn-pluss li { height: 25px; transition: height 1s ease; } .btn-pluss-wrapper:hover .btn-pluss li:hover { border-bottom: 1px solid #d2c9c9; } @-webkit-keyframes jump { 0% { -webkit-transform: translateY(3px); transform: translateY(3px); } 50% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 100% { -webkit-transform: translateY(3px); transform: translateY(3px); } } @keyframes jump { 0% { -webkit-transform: translateY(3px); transform: translateY(3px); } 50% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 100% { -webkit-transform: translateY(3px); transform: translateY(3px); } }