<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="adminActions"> <input type="checkbox" name="adminToggle" class="adminToggle" /> <a class="adminButton" href="#!"><i class="fa fa-bell"></i></a> <div class="adminButtons"> <a href="#" title="Add Company"><i class="fa fa-phone"></i></a> <a href="#" title="Edit Company"><i class="fa fa-whatsapp"></i></a> <a href="#" title="Edit User"><i class="fa fa-whatsapp"></i></a> </div> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

body { background-color: #f5f5f5; } .adminActions { position: fixed; bottom: 35px; right: 35px; } .adminButton { height: 60px; width: 60px; background-color: rgba(67, 83, 143, .8); border-radius: 50%; display: block; color: #fff; text-align: center; position: relative; z-index: 1; } .adminButton i { font-size: 22px; } .adminButtons { position: absolute; width: 100%; bottom: 120%; text-align: center; } .adminButtons a { display: block; width: 45px; height: 45px; border-radius: 50%; text-decoration: none; margin: 10px auto 0; line-height: 1.15; color: #fff; opacity: 0; visibility: hidden; position: relative; box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3); } .adminButtons a:hover { transform: scale(1.05); } .adminButtons a:nth-child(1) {background-color: #ff5722; transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;} .adminButtons a:nth-child(2) {background-color: #03a9f4; transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;} .adminButtons a:nth-child(3) {background-color: #f44336; transition: opacity .2s ease-in-out .2s, transform .15s ease-in-out;} .adminButtons a:nth-child(4) {background-color: #4CAF50; transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out;} .adminActions a i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .adminToggle { -webkit-appearance: none; position: absolute; border-radius: 50%; top: 0; left: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; background-color: transparent; border: none; outline: none; z-index: 2; transition: box-shadow .2s ease-in-out; box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3); } .adminToggle:hover { box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3); } .adminToggle:checked ~ .adminButtons a { opacity: 1; visibility: visible; }