<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 ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <div class="bar"> <i class="material-icons">home</i> <i class="material-icons">search</i> <i class="material-icons">add_box</i> <i class="material-icons is-active">favorite <div class="notif"> <i class="material-icons">favorite</i> <i class="material-icons">mode_comment</i> <i class="material-icons">person</i> </div> </i> <i class="material-icons">person</i> </div> <script type="text/javascript"> $('.bar i').click(function() { $(this).addClass('is-active').siblings().removeClass('is-active'); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

* { box-sizing: border-box; text-align: center; cursor: pointer; margin: 0; padding: 0; } body { background: #f2f2f2; } .bar { width: 280px; height: 45px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 45px; } .bar i { color: #c7c7c7; line-height: 45px; font-size: 22px; transition: 0.3s linear; } .bar .is-active { color: #000; } .bar .is-active .notif { display: block; animation: insta 0.8s ease-in-out forwards; transform-origin: center 60px; } @-webkit-keyframes insta { 0% { opacity: 0; -webkit-transform: scale(0.1) rotate(-30deg) translateY(-50px) rotateX(90deg); transform: scale(0.1) rotate(-30deg) translateY(-50px) rotateX(90deg); } 50% { opacity: 1; } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes insta { 0% { opacity: 0; -webkit-transform: scale(0.1) rotate(-30deg) translateY(-50px) rotateX(90deg); transform: scale(0.1) rotate(-30deg) translateY(-50px) rotateX(90deg); } 50% { opacity: 1; } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .notif { display: none; width: 130px; height: 35px; background: #e95950; position: absolute; right: 17px; bottom: 60px; border-radius: 7px; } .notif:after { content: ""; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #e95950; position: absolute; left: 50%; bottom: -7px; transform: translateX(-65%); } .notif i { color: #fff; width: 33.33%; height: 35px; font-size: 17px; line-height: 35px; float: left; }