Live Demo - Bootstrap 4 Toggle Sidebar Sticky Button Example

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

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