Create Social Media Buttons With Hover Animation





Its features:

  • Touching on the button will show the animation.

  • When you compress it, the button bar displays the button vertically.

  • To move the button to the right or left of the page, use "float: left" or "float: right".

  • You can add a link to the name of each button.

  • You can change the model color via CSS if you want.

Try to create like yourself by following the codes below :

Step 1) Add to head : <script src="https://kit.fontawesome.com/a076d05399.js"></script>
Step 2) Add to html : <h2>Create Social Media Buttons With Hover Animation</h2> <div class="wrapper"> <div class="button"> <div class="icon"><i class="fab fa-facebook-f"></i></div> <a href="#abcd"><span>Facebook</span></a> </div> <div class="button"> <div class="icon"><i class="fab fa-twitter"></i></div> <a href="#abcd"><span>Twitter</span></a> </div> <div class="button"> <div class="icon"><i class="fab fa-instagram"></i></div> <a href="#abcd"><span>Instagram</span></a> </div> <div class="button"> <div class="icon"><i class="fab fa-github"></i></div> <a href="#abcd"><span>Github</span></a> </div> <div class="button"> <div class="icon"><i class="fab fa-youtube"></i></div> <a href="#abcd"><span>YouTube</span></a> </div> </div>
Step 3) Add to css : .wrapper .button{ display:inline-block; height:60px; width:60px; float:left; margin:0 5px; overflow:hidden; background-image: linear-gradient(#bbb, #ddd, #bbb); border-radius:50px; cursor:pointer; box-shadow:0px 10px 10px rgba(0,0,0,0.1); transition:all 0.3s ease-out; float:left; } .button a{ text-decoration:none; } .wrapper .button:hover{ width:200px; } .wrapper .button .icon{ display:inline-block; height:60px; width:60px; text-align:center; border-radius:50px; box-sizing:border-box; line-height:60px; transition:all 0.3s ease-out; } .wrapper .button:nth-child(1):hover .icon{ background-image: linear-gradient(#f75431, #f68622, #f75431); } .wrapper .button:nth-child(2):hover .icon{ background-image: linear-gradient(#118ded, #01d4f6, #118ded); } .wrapper .button:nth-child(3):hover .icon{ background-image: linear-gradient(#45aa4a, #84be3e, #45aa4a); } .wrapper .button:nth-child(4):hover .icon{ background-image: linear-gradient(#9539b0, #6744c4, #9539b0); } .wrapper .button:nth-child(5):hover .icon{ background-image: linear-gradient(#670da8, #2b75be, #670da8); } .wrapper .button .icon i{ font-size:25px; line-height:60px; transition:all 0.3s ease-out; } .wrapper .button:hover .icon i{ color:#fff; } .wrapper .button span{ font-size:25px; margin-left:10px; transition:all 0.3s ease-out; }

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.