<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"> <h2 class="text-center mk" style="text-align:center">Social Fixed Icon</h2> </div> </div> <div id="fixed-social"><div><a title="fa fa-facebook btn-facebook" target="_blank" class="fixed-facebook" href="#"><i class="fa fa-facebook btn-facebook"></i><span>Facebook</span></a></div><div><a title="fa fa-twitter btn-twitter" target="_blank" class="fixed-twitter" href="#"><i class="fa fa-twitter btn-twitter"></i><span>Twitter</span></a></div><div><a title="fa fa-youtube btn-youtube" target="_blank" class="fixed-youtube" href="#"><i class="fa fa-youtube btn-youtube"></i><span>Youtube</span></a></div></div> <div id="calendar-diary"> <span class="titles_cls"><i class="fa fa-calendar" aria-hidden="true"></i> <span class="">Diary / calendar 2022</span></span> <a href="#" target="_blank" title="Diary/Calendar 2022" style="display: inline-block;text-align: left;vertical-align: top;margin-left:-4px;"> <img src="images/dairy-img.jpg" alt="dairy-img"> <span style="display: block; text-align: center;margin-top:-40px;"></span> <span style="font-size: 12px;margin-left: 12px;" class="btn btn-primar">Diary / calendar 2022</span> </a> </div>

.mk{text-align:center;margin:0 auto;background:blue;color:#fff;padding:5px 15px;border-radius:15px;} #calendar-diary { position: fixed; z-index: 4; top: 2rem; right: -168px; transition: all .5s; cursor: pointer; display: inline-block } #calendar-diary:hover { right: 0 } .titles_cls { color: #fff; padding: 8px 10px; font-size: 15px; border-radius: 6px 0 0 6px; writing-mode: tb-rl; text-orientation: mixed; display: inline-block; text-align: center; line-height: 20px; text-transform: uppercase; height: 224px; width: 40px; background-color: #135637; font-weight: 700 } #calendar-diary img { display: block; width: 166px; height: 224px } #fixed-social { position: fixed; top: 2rem; z-index: 999; } #fixed-social a { color: #fff; display: block; height: 40px; position: relative; text-align: center; line-height: 40px; width: 40px; margin-bottom: 1px; z-index: 2 } #fixed-social a:hover>span { visibility: visible; left: 41px; opacity: 1 } #fixed-social a span { line-height: 40px; left: 60px; position: absolute; text-align: center; width: 120px; visibility: hidden; transition-duration: .5s; z-index: 1; opacity: 0; border-radius: 15px 0; } .fixed-facebook { background-color: #4867aa; } .fixed-facebook span { background-color: #4867aa } .fixed-twitter { background-color: #55adee } .fixed-youtube { background: #c71f1e; } .fixed-youtube span { background-color: #c71f1e } .fixed-twitter span { background-color: #55adee } .fixed-linkedin { background-color: #0077b5 } .fixed-linkedin span { background-color: #0077b5 } .fixed-google{ background-color: #dd5144 } .fixed-google span { background-color: #dd5144 } .fixed-Dribbble{ background-color: #e04b85 } .fixed-Dribbble span { background-color: #e04b85 } .fixed-Vimeo-Square{ background-color: #1f08b4 } .fixed-Vimeo-Square span { background-color: #1f08b4 } .fixed-RSS{ background-color: #f5953b } .fixed-RSS span { background-color: #f5953b } .fixed-Pinterrest{ background-color: rgb(183 8 27) } .fixed-Pinterrest span { background-color: rgb(183 8 27) } .fixed-Android{ background-color: rgb(115 187 86) } .fixed-Android span { background-color: rgb(115 187 86) } .fixed-Flickr{ background-color: rgb(0 96 212) } .fixed-Flickr span { background-color: rgb(0 96 212) }