<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 ----------> <!--Learn in https://www.youtube.com/watch?v=yU3giDe-N6c&ab_channel=CodingNepal--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="button"> <div class="icon"> <i class="fa fa-facebook" aria-hidden="true"></i> </div> <span>Facebook</span> </div> <div class="button"> <div class="icon"> <i class="fa fa-instagram" aria-hidden="true"></i> </div> <span>Instagram</span> </div> <div class="button"> <div class="icon"> <i class="fa fa-linkedin" aria-hidden="true"></i> </div> <span>Linkedin</span> </div> <div class="button"> <div class="icon"> <i class="fa fa-twitter" aria-hidden="true"></i> </div> <span>Twitter</span> </div> <div class="button"> <div class="icon"> <i class="fa fa-youtube-play" aria-hidden="true"></i> </div> <span>Youtube</span> </div> </div>

*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } html, body{ display: grid; height: 100%; width: 100%; place-items: center; background: linear-gradient(315deg, #ffffff 0%, #d7e1ec); } .container .button{ display: inline-block; height: 60px; width: 60px; float: left; margin: 0 5px; background: #fff; border-radius: 50px; cursor: pointer; box-shadow: 0px 10px 10px rgba(0,0,0,0.1); transition: all 0.5s ease-out; } .container .button .icon{ display: inline-block; text-align: center; height: 60px; width: 60px; border-radius: 50px; box-sizing: border-box; line-height: 60px; transition: all 0.5s ease-out; } .container .button .icon i{ font-size: 25px; line-height: 60px; transition: all 0.5s ease-out; } .container .button span{ font-size: 20px; font-weight: 500; line-height: 60px; margin-left: 10px; transition: all 0.5s ease-out; } .container .button:hover{ width: 200px; } .container .button{ overflow: hidden; } .container .button:nth-child(1):hover .icon{ background: #4267B2; } .container .button:nth-child(2):hover .icon{ background: #e4405f; } .container .button:nth-child(3):hover .icon{ background: #0077B5; } .container .button:nth-child(4):hover .icon{ background: #55acee; } .container .button:nth-child(5):hover .icon{ background: #cd201f; } .container .button:hover .icon i{ color: #fff; } .container .button:nth-child(1) span{ color: #4267B2; } .container .button:nth-child(2) span{ color: #e4405f; } .container .button:nth-child(3) span{ color: #0077B5; } .container .button:nth-child(4) span{ color: #55acee; } .container .button:nth-child(5) span{ color: #cd201f; }