<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://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> <div class="float-container"> <a href="#" class="icon one">Book now</a> <a href="#" class="icon two">Get in touch</a> <a href="#" class="icon three">Send us a message</a> </div>

.float-container { position: fixed; top: 33%; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; width: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .float-container a { z-index: 99; display: -webkit-box; display: -ms-flexbox; display: flex; width: 200px; height: 30px; margin-right: -190px; margin-bottom: 10px; padding: 10px 20px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; text-decoration: none; color: white; border-color: #46b8da; border-radius: 5px 0 0 5px; background-color: #eb690b; -webkit-box-shadow: 0 2px 4px #7d7d7d; box-shadow: 0 2px 4px #7d7d7d; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; font-family: sans-serif; } .float-container a:hover { margin-right: 0; background-color: #c45100; -webkit-box-shadow: 0 2px 4px #7d7d7d; box-shadow: 0 2px 4px #7d7d7d; } /* Icon settings - remove if not needed*/ .float-container .icon:before { font-family: "Font Awesome 5 Free"; margin-right: 25px; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .icon.one:before { content: "\f073"; } .icon.two:before { content: "\f086"; } .icon.three:before { content: "\f1d8"; } /* Media queries */ @media screen and (max-width:440px) { .float-container .icon:last-child { display: none; } .float-container { position: fixed; top: auto; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: auto; -webkit-box-align: auto; -ms-flex-align: auto; align-items: auto; } .float-container a.icon { right: 0; bottom: 0; width: 100%; margin-right: 0; margin-bottom: 0; padding: 5px; border-radius: 0; -webkit-box-shadow: 0 0 0 #7d7d7d; box-shadow: 0 0 0 #7d7d7d; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-left: 1px solid darkorange; border-right: 1px solid darkorange; } } /*** Discard this ***/ body { background: #f2f2f2; } p { font-family: "Montserrat"; font-weight: 800; line-height: 160px; font-size: 200px; color: #e2e2e2; text-transform: uppercase; }