NiceSnippets.com
Bootstrap 4 Toggle Sidebar Sticky Button Example
We are giving you second toggle sidebar sticky button usign bootstrap 4 and html,ccc. this is fixed toggle button simple demo. you can easily implement in your project this toggle fixed sidebar link. when you click on arrow then open and then you click on arrow then it's hide. toggle button open in smoothly effect.
We allows to free snippets of bootstrap 4 sidebar collapse , you can download full code of bootstrap affix sidebar button layout. Here in this post i will give you example of bootstrap 4 fixed left sidebar toggle button snippet and you will get simple code of html, css and jquery. In bootstrap fixed position button snippet i give you three tab with html, css and js, you can easily get code of fixed button on side of website layout.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="box">
<a href="//www.nicesnippets.com" target="_blank">
<div class="text">
<h4>Click Me</h4>
</div>
<div class="ribbon blue">
<span class="text-center">Apply</span>
</div>
</a>
<i class="fa fa-arrow-right icon" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</body>
</html>
body{
background: url(https://www.borgamarmi.it/sito/wp-content/uploads/2017/03/black-kosmos.jpg);
}
.text h4{
margin-top:110px;
margin-right:-126px;
color:#fff;
font-size: 20px;
}
.open-more{
left:0px !important;
-moz-transition-duration: 2s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
.open-more i{
transform: rotate(180deg);
background: rgba(73,161,73,0.7);
}
.text{
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
padding: 0px;
margin: 0px;
}
.box{
position: fixed;
z-index: 800;
left:-70px;
top:50%;
transform: translateY(-50%);
width:65px;
height:250px !important;
background: rgba(73,161,73,0.7);
box-shadow: 0px 0px 4px 0px #444444;
cursor: pointer;
}
.box a{
text-decoration: none;
width: 100%;
height: 100%;
display: inline-block;
}
.icon{
position:absolute;
top:45%;
right:-34px;
padding:10px;
background-color:#79B479;
color:#fff;
border-radius:0px 20px 20px 0px;
}
.button{
-moz-transform: rotate(-180deg);
border-radius: 20px 0px 0px 20px;
}
.ribbon{
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span{
font-size: 10px;
color: #2F506C;
text-transform: uppercase;
font-weight: bold; line-height: 20px;
transform: rotate(45deg);
width: 75px; display: block;
background: linear-gradient(#9BC90D 0%, #2F506C 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 10px; right: -17px;
}
.ribbon span::before{
content: '';
position: absolute;
left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #79A70A;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
.ribbon span::after {
content: '';
position: absolute;
right: 0%; top: 100%;
z-index: -1;
border-right: 3px solid #79A70A;
border-left: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);}
.blue span {background: linear-gradient(#fff 0%, #fff 100%);}
.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;}
.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;}
$(document).ready(function(){
$( ".icon" ).click(function(){
$('.box').toggleClass( "open-more");
$(this).toggleClass( "button");
});
});
