Live Demo - Bootstrap 4 Bottom Right Social Media Button Design

See Free Live Demo example of 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 an...

<!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;
}