<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>Social Media Cards</h2> <div class="col-md-4"> <a class="social-box bg-linkedin" href="https://www.linkedin.com/company/14804984" target="_blank"> <div class="bubble"> <span class="fa fa-linkedin"></span> </div> <div class="content"> LinkedIn </div> </a> </div> <div class="col-md-4"> <a class="social-box bg-twitter" href="https://twitter.com/bunishaltd" target="_blank"> <div class="bubble"> <span class="fa fa-twitter"></span> </div> <div class="content"> Twitter </div> </a> </div> <div class="col-md-4"> <a class="social-box bg-instagram" href="https://www.instagram.com/bunishaltd/" target="_blank"> <div class="bubble bg-instagram"> <span class="fa fa-instagram"></span> </div> <div class="content bg-instagram"> Instagram </div> </a> </div> <div class="col-md-4"> <a class="social-box bg-youtube" href="https://www.linkedin.com/company/14804984" target="_blank"> <div class="bubble"> <span class="fa fa-youtube"></span> </div> <div class="content"> Youtube </div> </a> </div> </div> </div>

.bg-facebook { background-color: #4267B2 !important; color: white; } .bg-instagram { background-image: -webkit-gradient(linear, left top, right bottom, from(#C70074), color-stop(#E41131), to(#F7C800)); background-image: linear-gradient(to bottom right, #C70074, #E41131, #F7C800); color: white; } .bg-twitter { background-color: #1DA1F2 !important; color: white; } .bg-youtube { background-color: #FF0000 !important; color: white; } .bg-linkedin { background-color: #0089CD !important; color: #fff; } .social-box { position: relative; width: auto; min-width: 200px; max-width: 200px; height: auto; min-height: 45px; max-height: 45px; margin: 0px; padding: 0px; overflow: hidden; background-color: transparent; overflow: hidden; overflow: visible; margin: 10px 10px 10px; border-radius: 20px; } .social-box else { max-width: none; } .social-box else { max-height: none; } .social-box .bubble { position: absolute; top: -5px; left: -5px; width: auto; min-width: 55px; max-width: 55px; height: auto; min-height: 55px; max-height: 55px; margin: 0px; padding: 0px; overflow: hidden; background-color: inherit; overflow: hidden; float: left; font-size: large; line-height: 55px; text-align: center; font-size: 3rem; border-radius: 50%; border: 2px solid white; } .social-box .bubble else { max-width: none; } .social-box .bubble else { max-height: none; } .social-box .content { position: absolute; width: auto; min-width: 145px; max-width: 145px; height: auto; min-height: 45px; max-height: 45px; margin: 0px; padding: 0px; overflow: hidden; background-color: inherit; overflow: hidden; margin-left: 50px; border-radius: 20px; text-align: center; font-size: 2rem; line-height: 45px; } .social-box .content else { max-width: none; } .social-box .content else { max-height: none; } .social-box:hover .bubble { color: #333333; border-color: currentColor; } .social-box:hover .content { color: #333333; } @media only screen and (max-width: 320px) { .social-box { position: relative; width: auto; min-width: 48%; max-width: 48%; height: auto; min-height: 45px; max-height: 45px; margin: 0px; padding: 0px; overflow: hidden; background-color: transparent; overflow: hidden; margin: 10px 1% 10px; } .social-box else { max-width: none; } .social-box else { max-height: none; } .social-box .bubble { width: auto; min-width: 55px; max-width: 55px; height: auto; min-height: 55px; max-height: 55px; margin: 0px; padding: 0px; overflow: hidden; background-color: inherit; overflow: hidden; } .social-box .bubble else { max-width: none; } .social-box .bubble else { max-height: none; } .social-box .content { position: absolute; width: auto; min-width: auto; max-width: auto; height: auto; min-height: 45px; max-height: 45px; margin: 0px; padding: 0px; overflow: hidden; background-color: inherit; overflow: hidden; margin-left: 50px; border-radius: 20px; text-align: center; font-size: 1.5rem; line-height: 45px; } .social-box .content else { max-width: none; } .social-box .content else { max-height: none; } } @media only screen and (max-width: 480px) { .social-box { position: relative; width: auto; min-width: 40%; max-width: 40%; height: auto; min-height: 35px; max-height: 35px; margin: 0px; padding: 0px; overflow: hidden; background-color: transparent; overflow: hidden; margin: 10px 1% 10px; overflow: visible; } .social-box else { max-width: none; } .social-box else { max-height: none; } .social-box .bubble { width: auto; min-width: 45px; max-width: 45px; height: auto; min-height: 45px; max-height: 45px; margin: 0px; padding: 0px; overflow: hidden; background-color: inherit; overflow: hidden; line-height: 45px; font-size: 2.5rem; } .social-box .bubble else { max-width: none; } .social-box .bubble else { max-height: none; } .social-box .content { position: absolute; width: auto; min-width: 75px; max-width: 75px; height: auto; min-height: 35px; max-height: 35px; margin: 0px; padding: 0px; overflow: hidden; background-color: inherit; overflow: hidden; margin-left: 50px; border-radius: 20px; text-align: center; font-size: 1.5rem; line-height: 35px; } .social-box .content else { max-width: none; } .social-box .content else { max-height: none; } }