"side button"
Bootstrap 3.3.0 Snippet by evarevirus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="socialBar"> <a href="#" title="Facebook"><i class="ico FbIcon"><img src="http://i224.photobucket.com/albums/dd65/etaguile/Facebook_zpsjtffnhpc.png"></i></a> <a href="#" title="Instagram"><i class="ico IgIcon"><img src="http://i224.photobucket.com/albums/dd65/etaguile/Instagram_zpsxd1y4jrr.png"></i></a> <a href="#" title="Youtube"><i class="ico YtIcon"><img src="http://i224.photobucket.com/albums/dd65/etaguile/Youtube_zpsukjqxwxm.png"></i></a> <a href="#" title="Skype"><i class="ico SkIcon"><img src="http://i224.photobucket.com/albums/dd65/etaguile/Skype_zpsynhtoecv.png"></i></a> </div>
body { /*JUST FOR TEST, YOU CAN REMOVE IT*/ height: 6000px; background-color: #A6A6A6; } .socialBar { /*JUST FOR POSITIONING THE SOCIAL DIV: CENTERED RIGHT*/ position: fixed; right: 0px; /*THIS WILL TAKE YOU A MARGIN FROM RIGHT*/ top: 50%; /*CENTER THE DIV, DO NOT EDIT*/ transform: translate(0%, -50%); /*CENTER THE DIV, DO NOT EDIT*/ -webkit-transform: translate(0%, -50%); /*CENTER THE DIV, DO NOT EDIT*/ -moz-transform: translate(0%, -50%); /*CENTER THE DIV, DO NOT EDIT*/ -o-transform: translate(0%, -50%); /*CENTER THE DIV, DO NOT EDIT*/ background-color: #303030; /*WHATEVER COLOR THAT YOU WANT*/ } .socialBar .ico { display: block; /*VERTICAL POSITION*/ padding: 8px; /*DO NOT EDIT, MAINTAINS THE CORRECT SIZE FOR BACKGROUND COLOR*/ } .socialBar:hover .ico { /*JUST ANIMATION, YOU CAN REMOVE IT IF YOU WANT A FAST COLOR CHANGE*/ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .socialBar .FbIcon:hover { /*THIS MAKES A COLOR CHANGE*/ background-color: #3B5998; } .socialBar .IgIcon:hover { background-color: #FFD140; } .socialBar .YtIcon:hover { background-color: #BF221F; } .socialBar .SkIcon:hover { background-color: #2AA4E9; }

Related: See More


Questions / Comments: