Social media toggle button at bottom right corner usign bootstrap 4. when you hover on button then open social media icon. this is social media toggle button demo. bootstrap 4 social media toggle button example with font-awesome icon. social media button like facebook,twitter,whatsapp,google plus and youtube.

We allows to free snippets of bootstrap social media icons navbar , you can download full code of bootstrap buttons with social media icons layout. Here in this post i will give you example of social media buttons for website free snippet and you will get simple code of html, css and jquery. In font awesome social media icons with button snippet i give you three tab with html, css and js, you can easily get code of Bootstrap Snippet Social Buttons for Bootstrap using HTML CSS layout.


<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container"> <div class="row"> <div class="main-button"> <button class="btn btn-primary"><i class="fa fa-plus" aria-hidden="true"></i></button> <ul class="social-btn"> <li class="btn btn-defualt Facebook">Facebook <i class="fa fa-facebook" aria-hidden="true"></i></li><br> <li class="btn btn-defualt Twitter">Twitter <i class="fa fa-twitter" aria-hidden="true"></i></li><br> <li class="btn btn-defualt Whatsapp">Whatsapp <i class="fa fa-whatsapp" aria-hidden="true"></i></li><br> <li class="btn btn-defualt Google-plus">Google-plus <i class="fa fa-google-plus" aria-hidden="true"></i></li><br> <li class="btn btn-defualt YouTube">YouTube <i class="fa fa-youtube" aria-hidden="true"></i></li> </ul> </div> </div> </div> </body> </html>
.main-button button{ position:fixed; height:80px; width:80px; bottom:80px; right:100px; font-size:30px; } .main-button:hover .fa-plus{ transform: rotate(45deg); transition:0.5s; } .social-btn{ opacity: 0; display: none; position:fixed; bottom:150px; right:100px; transition: opacity 0.7s; } .main-button:hover > .social-btn{ opacity: 1; display: block; } .social-btn li i{ float:right; font-size:17px; margin-top:10px; } .main-button ul li{ width:250px; text-align:left; margin-bottom:10px; font-weight: bold; height: 50px; } .main-button ul li:hover i{ font-size:25px; } .social-btn .Facebook,.social-btn .Twitter,.social-btn .Whatsapp,.social-btn .Google-plus,.social-btn .YouTube{ background-color: #4267B2; color:#fff; } .social-btn .Twitter{ background-color: #1DA1F2; } .social-btn .Whatsapp{ background-color: #009688; } .social-btn .Google-plus{ background-color: #D0463B; } .social-btn .YouTube{ background-color: #ED2423; } .main-button ul li i{ position: absolute; right:20px; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post