1

He creado una barra Social, y con ayuda de @Flowen se puede ocultar mediante un botón. La cosa es que he intentado cambiar de aspecto como me sugirió sin conseguirlo. Es el botón de abajo de la fila, el verde, que tiene un icono de una flecha que no se ve por que los estilos están en otro archivo muy extenso. A ver que debo hacer para que de primeras se vea el botón, y para volver a mostrar se vea una flechita ( > ) y moleste menos que el dicho botón. No se si debo hacerlo con css o javascript. Muestro el código. Gracias.

        function ocultar(){
            $(".lateral").hide();
            $("#mostrar").show();
        }
        function mostrar(){
            $(".lateral").show();
            $("#mostrar").hide();
        }
  
   /* CREADO CON AYUDA DE @Flowen */

/* Estilos de las pestañas*/

#mostrar{
    display:none;
    }

*{
    margin:0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.social{
    position: fixed;
    left:0;
    top:200px;
    z-index: 2000;
}

.social ul {
    list-style: none;
}

/*.social ul li a {
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms; 
    -0-transition:all 500ms;
    transition: all 500ms
}*/

.social ul li a {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease; 
}

.social ul li  .icon-facebook {background: #3b5998 ;}
.social ul li  .icon-twitter {background:#00abf0 ;}
.social ul li  .icon-youtube {background:#F8030E   ;}
.social ul li  .icon-google {background: #d95232;}
.social ul li  .icon-envelop {background: #666666  ;}
.social ul li  .icon-blogger2 {background:#F88103 ;}
.social ul li  .icon-chevron-left{background: #88F34F;}
.social ul li  .icon-chevron-right{background: #88F34F;}

.social ul li a:hover{
    padding: 10px 30px;
    background: #000;
}

/* Estilos de las fuentes*/

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?fk3lx7');
  src:  url('fonts/icomoon.eot?fk3lx7#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?fk3lx7') format('truetype'),
    url('fonts/icomoon.woff?fk3lx7') format('woff'),
    url('fonts/icomoon.svg?fk3lx7#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-email:before {
  content: "\e900";
}
.icon-info:before {
  content: "\e901";
}
.icon-mail:before {
  content: "\e902";
}
.icon-skype2:before {
  content: "\e903";
}
.icon-linkedin-with-circle:before {
  content: "\e904";
}
.icon-controller-fast-backward:before {
  content: "\e913";
}
.icon-chevron-left:before {
  content: "\e914";
}
.icon-chevron-right:before {
  content: "\e915";
}
.icon-chevron-small-left:before {
  content: "\e916";
}
.icon-chevron-small-right:before {
  content: "\e917";
}
.icon-chevron-thin-left:before {
  content: "\e918";
}
.icon-chevron-thin-right:before {
  content: "\e919";
}
.icon-controller-fast-forward:before {
  content: "\e91a";
}
.icon-game-controller:before {
  content: "\e907";
}
.icon-globe:before {
  content: "\e908";
}
.icon-info2:before {
  content: "\e905";
}
.icon-location-pin:before {
  content: "\e909";
}
.icon-magnifying-glass:before {
  content: "\e90a";
}
.icon-mail3:before {
  content: "\e906";
}
.icon-old-phone:before {
  content: "\e90b";
}
.icon-paper-plane:before {
  content: "\e90c";
}
.icon-price-tag:before {
  content: "\e90d";
}
.icon-tablet:before {
  content: "\e90e";
}
.icon-thumbs-up:before {
  content: "\e90f";
}
.icon-google:before {
  content: "\e910";
}
.icon-youtube3:before {
  content: "\e911";
}
.icon-play:before {
  content: "\e912";
}
.icon-envelop:before {
  content: "\e945";
}
.icon-location:before {
  content: "\e947";
}
.icon-location2:before {
  content: "\e948";
}
.icon-bubbles4:before {
  content: "\e970";
}
.icon-users:before {
  content: "\e972";
}
.icon-cog:before {
  content: "\e994";
}
.icon-cogs:before {
  content: "\e995";
}
.icon-mail2:before {
  content: "\ea84";
}
.icon-mail4:before {
  content: "\ea86";
}
.icon-google-plus2:before {
  content: "\ea8c";
}
.icon-google-plus3:before {
  content: "\ea8d";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-facebook2:before {
  content: "\ea91";
}
.icon-telegram:before {
  content: "\ea95";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-youtube2:before {
  content: "\ea9e";
}
.icon-github:before {
  content: "\eab0";
}
.icon-blogger2:before {
  content: "\eab8";
}
.icon-tumblr2:before {
  content: "\eaba";
}
.icon-skype:before {
  content: "\eac5";
}
.icon-linkedin:before {
  content: "\eac9";
}
.icon-bubble2:before {
  content: "\e96e";
}
.icon-fire:before {
  content: "\e9a9";
}
.icon-lab:before {
  content: "\e9aa";
}
.icon-magnet:before {
  content: "\e9ab";
}
.icon-bin:before {
  content: "\e9ac";
}
.icon-bin2:before {
  content: "\e9ad";
}
.icon-briefcase:before {
  content: "\e9ae";
}
.icon-airplane:before {
  content: "\e9af";
}
.icon-truck:before {
  content: "\e9b0";
}
.icon-road:before {
  content: "\e9b1";
}
.icon-accessibility:before {
  content: "\e9b2";
}
.icon-target:before {
  content: "\e9b3";
}
.icon-shield:before {
  content: "\e9b4";
}
.icon-power:before {
  content: "\e9b5";
}
.icon-switch:before {
  content: "\e9b6";
}
.icon-power-cord:before {
  content: "\e9b7";
}
.icon-clipboard:before {
  content: "\e9b8";
}
.icon-menu4:before {
  content: "\e9c0";
}
.icon-cloud:before {
  content: "\e9c1";
}
.icon-cloud-download:before {
  content: "\e9c2";
}
.icon-cloud-upload:before {
  content: "\e9c3";
}
.icon-cloud-check:before {
  content: "\e9c4";
}
.icon-download2:before {
  content: "\e9c5";
}
.icon-point-up:before {
  content: "\ea03";
}
.icon-plus:before {
  content: "\ea0a";
}
.icon-play2:before {
  content: "\ea15";
}
.icon-play3:before {
  content: "\ea1c";
}
.icon-backward2:before {
  content: "\ea1f";
}
.icon-forward3:before {
  content: "\ea20";
}
.icon-arrow-right:before {
  content: "\ea34";
}
.icon-arrow-left:before {
  content: "\ea38";
}
.icon-arrow-right2:before {
  content: "\ea3c";
}
.icon-arrow-left2:before {
  content: "\ea40";
}
.icon-circle-right:before {
  content: "\ea42";
}
.icon-circle-left:before {
  content: "\ea44";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-facebook3:before {
  content: "\ea92";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Social</title>
    <link rel="stylesheet" href="redes.css">
    <link rel="stylesheet" href="redes-fonts.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
</head>
<body>

   <div class="social">
       <ul>
           <li><a href="https://www.facebook.com/profile.php?id=100009248037432" class="icon-facebook lateral"></a></li>
           <li><a href="https://twitter.com/laparramiguel" class="icon-twitter lateral"></a></li>
           <li><a href="http://www." class="icon-youtube lateral"></a></li>
           <li><a href="https://plus.google.com/u/0/109747958435546403812" class="icon-google lateral"></a></li>
           <li><a href="mailto: [email protected]" class="icon-envelop lateral"></a></li>
           <li><a href="https://paseandoporlanubedelared.blogspot.com.es/" class="icon-blogger2 lateral"></a></li>
           <li><a href="#" class="icon-chevron-left lateral" onclick="ocultar()"></a></li>
           <li><a href="#" class="icon-chevron-right" onclick="mostrar()" id="mostrar"></a></li>
       </ul>   
   </div>
   <script src="redes.js"></script>
</body>
</html>

/* Estilos de las pestañas*/

#mostrar{
    display:none;
    }

*{
    margin:0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.social{
    position: fixed;
    left:0;
    top:200px;
    z-index: 2000;
}

.social ul {
    list-style: none;
}

/*.social ul li a {
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms; 
    -0-transition:all 500ms;
    transition: all 500ms
}*/

.social ul li a {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease; 
}

.social ul li  .icon-facebook {background: #3b5998 ;}
.social ul li  .icon-twitter {background:#00abf0 ;}
.social ul li  .icon-youtube {background:#F8030E   ;}
.social ul li  .icon-google {background: #d95232;}
.social ul li  .icon-envelop {background: #666666  ;}
.social ul li  .icon-blogger2 {background:#F88103 ;}
.social ul li  .icon-chevron-left{background: #88F34F;}
.social ul li  .icon-chevron-right{background: #88F34F;}

.social ul li a:hover{
    padding: 10px 30px;
    background: #000;
}

/* Estilos de las fuentes*/

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?fk3lx7');
  src:  url('fonts/icomoon.eot?fk3lx7#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?fk3lx7') format('truetype'),
    url('fonts/icomoon.woff?fk3lx7') format('woff'),
    url('fonts/icomoon.svg?fk3lx7#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-email:before {
  content: "\e900";
}
.icon-info:before {
  content: "\e901";
}
.icon-mail:before {
  content: "\e902";
}
.icon-skype2:before {
  content: "\e903";
}
.icon-linkedin-with-circle:before {
  content: "\e904";
}
.icon-controller-fast-backward:before {
  content: "\e913";
}
.icon-chevron-left:before {
  content: "\e914";
}
.icon-chevron-right:before {
  content: "\e915";
}
.icon-chevron-small-left:before {
  content: "\e916";
}
.icon-chevron-small-right:before {
  content: "\e917";
}
.icon-chevron-thin-left:before {
  content: "\e918";
}
.icon-chevron-thin-right:before {
  content: "\e919";
}
.icon-controller-fast-forward:before {
  content: "\e91a";
}
.icon-game-controller:before {
  content: "\e907";
}
.icon-globe:before {
  content: "\e908";
}
.icon-info2:before {
  content: "\e905";
}
.icon-location-pin:before {
  content: "\e909";
}
.icon-magnifying-glass:before {
  content: "\e90a";
}
.icon-mail3:before {
  content: "\e906";
}
.icon-old-phone:before {
  content: "\e90b";
}
.icon-paper-plane:before {
  content: "\e90c";
}
.icon-price-tag:before {
  content: "\e90d";
}
.icon-tablet:before {
  content: "\e90e";
}
.icon-thumbs-up:before {
  content: "\e90f";
}
.icon-google:before {
  content: "\e910";
}
.icon-youtube3:before {
  content: "\e911";
}
.icon-play:before {
  content: "\e912";
}
.icon-envelop:before {
  content: "\e945";
}
.icon-location:before {
  content: "\e947";
}
.icon-location2:before {
  content: "\e948";
}
.icon-bubbles4:before {
  content: "\e970";
}
.icon-users:before {
  content: "\e972";
}
.icon-cog:before {
  content: "\e994";
}
.icon-cogs:before {
  content: "\e995";
}
.icon-mail2:before {
  content: "\ea84";
}
.icon-mail4:before {
  content: "\ea86";
}
.icon-google-plus2:before {
  content: "\ea8c";
}
.icon-google-plus3:before {
  content: "\ea8d";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-facebook2:before {
  content: "\ea91";
}
.icon-telegram:before {
  content: "\ea95";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-youtube2:before {
  content: "\ea9e";
}
.icon-github:before {
  content: "\eab0";
}
.icon-blogger2:before {
  content: "\eab8";
}
.icon-tumblr2:before {
  content: "\eaba";
}
.icon-skype:before {
  content: "\eac5";
}
.icon-linkedin:before {
  content: "\eac9";
}
.icon-bubble2:before {
  content: "\e96e";
}
.icon-fire:before {
  content: "\e9a9";
}
.icon-lab:before {
  content: "\e9aa";
}
.icon-magnet:before {
  content: "\e9ab";
}
.icon-bin:before {
  content: "\e9ac";
}
.icon-bin2:before {
  content: "\e9ad";
}
.icon-briefcase:before {
  content: "\e9ae";
}
.icon-airplane:before {
  content: "\e9af";
}
.icon-truck:before {
  content: "\e9b0";
}
.icon-road:before {
  content: "\e9b1";
}
.icon-accessibility:before {
  content: "\e9b2";
}
.icon-target:before {
  content: "\e9b3";
}
.icon-shield:before {
  content: "\e9b4";
}
.icon-power:before {
  content: "\e9b5";
}
.icon-switch:before {
  content: "\e9b6";
}
.icon-power-cord:before {
  content: "\e9b7";
}
.icon-clipboard:before {
  content: "\e9b8";
}
.icon-menu4:before {
  content: "\e9c0";
}
.icon-cloud:before {
  content: "\e9c1";
}
.icon-cloud-download:before {
  content: "\e9c2";
}
.icon-cloud-upload:before {
  content: "\e9c3";
}
.icon-cloud-check:before {
  content: "\e9c4";
}
.icon-download2:before {
  content: "\e9c5";
}
.icon-point-up:before {
  content: "\ea03";
}
.icon-plus:before {
  content: "\ea0a";
}
.icon-play2:before {
  content: "\ea15";
}
.icon-play3:before {
  content: "\ea1c";
}
.icon-backward2:before {
  content: "\ea1f";
}
.icon-forward3:before {
  content: "\ea20";
}
.icon-arrow-right:before {
  content: "\ea34";
}
.icon-arrow-left:before {
  content: "\ea38";
}
.icon-arrow-right2:before {
  content: "\ea3c";
}
.icon-arrow-left2:before {
  content: "\ea40";
}
.icon-circle-right:before {
  content: "\ea42";
}
.icon-circle-left:before {
  content: "\ea44";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-facebook3:before {
  content: "\ea92";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Social</title>
    <link rel="stylesheet" href="redes.css">
    <link rel="stylesheet" href="redes-fonts.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>

   <div class="social">
       <ul>
           <li><a href="https://www.facebook.com/profile.php?id=100009248037432" class="icon-facebook lateral"></a></li>
           <li><a href="https://twitter.com/laparramiguel" class="icon-twitter lateral"></a></li>
           <li><a href="http://www." class="icon-youtube lateral"></a></li>
           <li><a href="https://plus.google.com/u/0/109747958435546403812" class="icon-google lateral"></a></li>
           <li><a href="mailto: [email protected]" class="icon-envelop lateral"></a></li>
           <li><a href="https://paseandoporlanubedelared.blogspot.com.es/" class="icon-blogger2 lateral"></a></li>
           <li><a href="#" class="icon-chevron-left lateral" onclick="ocultar()"></a></li>
           <li><a href="#" class="icon-chevron-right" onclick="mostrar()" id="mostrar"></a></li>
       </ul>   
   </div>
   </body>
</html>
5
  • 1
    Hola Miguel, no entendí muy bien que quieres lograr... Commented el 13 dic. 2017 a las 22:44
  • 1
    Hola Camilo, queria que en vez de un boton el que oculta la barra, sea una flecha sin fondo, algo como (< ) para ocultar y ( > ) para mostrar la barra. Lo he visto en algun ejemplo y no soy capaz de sacarlo. Gracias Commented el 13 dic. 2017 a las 22:50
  • Entiendo, yo voy camino a casa si de acá a que llegue necesitas ayuda con gusto lo hago Commented el 13 dic. 2017 a las 23:03
  • 1
    @Camilo Vasquez, gracias, llevo todo el dia para esto y para tratar de compartir con los botenes, sin ningun exito, estoy hasta deprimido. Commented el 13 dic. 2017 a las 23:09
  • No debes aburrirte por que no te funcione algo, debes buscar la solución sin darte por vencido, ánimo !!!! ya te he dado una respuesta, espero te sirva Commented el 14 dic. 2017 a las 2:00

4 respuestas 4

3

He dado solución a tu problema realizando varios cambios de HTML y CSS (traté de no cambiarte mucho tu estructura), además organicé tu animación para que se viera mas fluida, te dejo el ejemplo funcional:

function ocultar(){
	$("#ocultar").css('opacity', 0);
    $(".lateral").not("#ocultar").parent().animate({
    	left: -42,
    	opacity: 0
    }, 300);
    $("#mostrar").show();
}

function mostrar(){
	$("#ocultar").css('opacity', 1);
    $(".lateral").parent().animate({
    	left: -0,
    	opacity: 1
    }, 300);
    $("#mostrar").hide();
}
/* CREADO CON AYUDA DE @Flowen */

/* Estilos de las pestañas*/
body{
	background: #ccc;
}

#mostrar{
    display:none;
    }

*{
    margin:0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.social{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2000;
    margin: auto;
    max-height: 252px;
}

.social ul {
    list-style: none;
    position: relative;
}

.social ul li{
	position: relative;
}

/*.social ul li a {
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms; 
    -0-transition:all 500ms;
    transition: all 500ms
}*/

.social ul li a:not(.boton_flecha){
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease; 
}


.social ul li  .icon-facebook {background: #3b5998 !important;}
.social ul li  .icon-twitter {background:#00abf0 !important;}
.social ul li  .icon-youtube {background:#F8030E !important;}
.social ul li  .icon-google {background: #d95232 !important;}
.social ul li  .icon-envelop {background: #666666 !important;}
.social ul li  .icon-blogger2 {background:#F88103 !important;}

.social ul li .boton_flecha{
	background: transparent;
	color:black;
	padding: 10px 15px;
	border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    text-decoration: none;
}

.social ul li a:not(.boton_flecha):hover{
    padding: 10px 30px;
    background: #000;
}

.social ul li a#mostrar{
	position: absolute;
	bottom: 0;
	left: 0;
}
/* Estilos de las fuentes*/

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?fk3lx7');
  src:  url('fonts/icomoon.eot?fk3lx7#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?fk3lx7') format('truetype'),
    url('fonts/icomoon.woff?fk3lx7') format('woff'),
    url('fonts/icomoon.svg?fk3lx7#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-email:before {
  content: "\e900";
}
.icon-info:before {
  content: "\e901";
}
.icon-mail:before {
  content: "\e902";
}
.icon-skype2:before {
  content: "\e903";
}
.icon-linkedin-with-circle:before {
  content: "\e904";
}
.icon-controller-fast-backward:before {
  content: "\e913";
}
.icon-chevron-left:before {
  content: "\e914";
}
.icon-chevron-right:before {
  content: "\e915";
}
.icon-chevron-small-left:before {
  content: "\e916";
}
.icon-chevron-small-right:before {
  content: "\e917";
}
.icon-chevron-thin-left:before {
  content: "\e918";
}
.icon-chevron-thin-right:before {
  content: "\e919";
}
.icon-controller-fast-forward:before {
  content: "\e91a";
}
.icon-game-controller:before {
  content: "\e907";
}
.icon-globe:before {
  content: "\e908";
}
.icon-info2:before {
  content: "\e905";
}
.icon-location-pin:before {
  content: "\e909";
}
.icon-magnifying-glass:before {
  content: "\e90a";
}
.icon-mail3:before {
  content: "\e906";
}
.icon-old-phone:before {
  content: "\e90b";
}
.icon-paper-plane:before {
  content: "\e90c";
}
.icon-price-tag:before {
  content: "\e90d";
}
.icon-tablet:before {
  content: "\e90e";
}
.icon-thumbs-up:before {
  content: "\e90f";
}
.icon-google:before {
  content: "\e910";
}
.icon-youtube3:before {
  content: "\e911";
}
.icon-play:before {
  content: "\e912";
}
.icon-envelop:before {
  content: "\e945";
}
.icon-location:before {
  content: "\e947";
}
.icon-location2:before {
  content: "\e948";
}
.icon-bubbles4:before {
  content: "\e970";
}
.icon-users:before {
  content: "\e972";
}
.icon-cog:before {
  content: "\e994";
}
.icon-cogs:before {
  content: "\e995";
}
.icon-mail2:before {
  content: "\ea84";
}
.icon-mail4:before {
  content: "\ea86";
}
.icon-google-plus2:before {
  content: "\ea8c";
}
.icon-google-plus3:before {
  content: "\ea8d";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-facebook2:before {
  content: "\ea91";
}
.icon-telegram:before {
  content: "\ea95";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-youtube2:before {
  content: "\ea9e";
}
.icon-github:before {
  content: "\eab0";
}
.icon-blogger2:before {
  content: "\eab8";
}
.icon-tumblr2:before {
  content: "\eaba";
}
.icon-skype:before {
  content: "\eac5";
}
.icon-linkedin:before {
  content: "\eac9";
}
.icon-bubble2:before {
  content: "\e96e";
}
.icon-fire:before {
  content: "\e9a9";
}
.icon-lab:before {
  content: "\e9aa";
}
.icon-magnet:before {
  content: "\e9ab";
}
.icon-bin:before {
  content: "\e9ac";
}
.icon-bin2:before {
  content: "\e9ad";
}
.icon-briefcase:before {
  content: "\e9ae";
}
.icon-airplane:before {
  content: "\e9af";
}
.icon-truck:before {
  content: "\e9b0";
}
.icon-road:before {
  content: "\e9b1";
}
.icon-accessibility:before {
  content: "\e9b2";
}
.icon-target:before {
  content: "\e9b3";
}
.icon-shield:before {
  content: "\e9b4";
}
.icon-power:before {
  content: "\e9b5";
}
.icon-switch:before {
  content: "\e9b6";
}
.icon-power-cord:before {
  content: "\e9b7";
}
.icon-clipboard:before {
  content: "\e9b8";
}
.icon-menu4:before {
  content: "\e9c0";
}
.icon-cloud:before {
  content: "\e9c1";
}
.icon-cloud-download:before {
  content: "\e9c2";
}
.icon-cloud-upload:before {
  content: "\e9c3";
}
.icon-cloud-check:before {
  content: "\e9c4";
}
.icon-download2:before {
  content: "\e9c5";
}
.icon-point-up:before {
  content: "\ea03";
}
.icon-plus:before {
  content: "\ea0a";
}
.icon-play2:before {
  content: "\ea15";
}
.icon-play3:before {
  content: "\ea1c";
}
.icon-backward2:before {
  content: "\ea1f";
}
.icon-forward3:before {
  content: "\ea20";
}
.icon-arrow-right:before {
  content: "\ea34";
}
.icon-arrow-left:before {
  content: "\ea38";
}
.icon-arrow-right2:before {
  content: "\ea3c";
}
.icon-arrow-left2:before {
  content: "\ea40";
}
.icon-circle-right:before {
  content: "\ea42";
}
.icon-circle-left:before {
  content: "\ea44";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-facebook3:before {
  content: "\ea92";
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="social">
   <ul>
       <li><a href="https://www.facebook.com/profile.php?id=100009248037432" class="icon-facebook lateral"></a></li>
       <li><a href="https://twitter.com/laparramiguel" class="icon-twitter lateral"></a></li>
       <li><a href="http://www." class="icon-youtube lateral"></a></li>
       <li><a href="https://plus.google.com/u/0/109747958435546403812" class="icon-google lateral"></a></li>
       <li><a href="mailto: [email protected]" class="icon-envelop lateral"></a></li>
       <li><a href="https://paseandoporlanubedelared.blogspot.com.es/" class="icon-blogger2 lateral"></a></li>
       <li><a href="#" class="lateral boton_flecha" id="ocultar" onclick="ocultar()"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li>
       <li><a href="#" class="boton_flecha" onclick="mostrar()" id="mostrar"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
   </ul>   
</div>

NOTA: agregué la librería de iconos FontAwesome únicamente para poder mostrar el icono de flecha, tu puedes borrarla y simplemente agregar el icono que estabas usando antes (ya que en los ejemplos no se ven por que faltan los archivos de fuente)...hice que tu barra de redes se adapte en la mitad de la pantalla (ejecuta el snippet en pantalla completa)

5
  • 1
    Gracias @Camilo Vasquez, perdona por volver a fallarte y no estar cuando llegaste al chat, aqui ya eran las 2 de la madruga y hoy tocaba otra vez levantar a las 7:30 AM. Muchas gracias por tu apoyo. Hoy intentare crear los botones de compartir mi web en redes sociales, que me pegue ayer todo el dia sin conseguir. Gracias de nuevo. Que tengas buen dia. Commented el 14 dic. 2017 a las 7:42
  • 1
    Bueno Camilo, ya probe tu ejemplo y no puedo agregar mi icono de flecha de mi fuente, me queda negro, por lo que seguire con el tuyo. Ahora voy a tratar de darle un movimiento de tintineo cuando esta la barra oculta que vi en un ejemplo que tiene @Edgar Gutiérrez en codepen. codepen.io/g3kdigital/pen/VMOPEj Por cierto, donde puedo aprender o por lo menos tener una guia para conseguir una milesima parte de tus conocimientos en css. Gracias de nuevo. Commented el 14 dic. 2017 a las 9:08
  • 1
    @MiguelEspeso me alegra mucho que te sirviera, recuerda no debes estar triste cuando algo no te da, lo que he aprendido fue por la práctica realmente, si necesitas algo más no dudes en decirme, saludos Commented el 14 dic. 2017 a las 13:12
  • 1
    Estoy tratando que el boton que me ayudas a crear tiemble automaticamente de vez en cuando y no cambie la posicion al pulsarle. Ya esta la pregunta en la comunidad y me dieron algun ejemplo que no me vale, seguire intentando. Gracias Commented el 14 dic. 2017 a las 13:18
  • @MiguelEspeso voy a ir a mirar ! Commented el 14 dic. 2017 a las 13:21
2

Puedes lograrlo con css vía input checkbox. La lógica sería algo así:

Cuando el input este checkado entonces aplica estilos a este elemento:

#input:checked ~ .elemento { /*estilos*/ }

Cuando el input no esta checkado entonces aplica estilos a este elemento:

#input:not(checked) ~ .elemento { /*estilos*/ }

Ahora solo tienes que relacionar un label, mediante poner el mismo id del input en su atributo for. No olvides ocultar el input, aunque sin quitarlo del flujo html, es decir, no uses display: none; porque no funcionará.

<label for="id-input">texto</label>
<input type="checkbox" id="id-input"/>

No importa si el input o el label estan super separados, mientras estén relacionados, si clicas el label afecta al input, la única pega a esto, es que el input debe estar antes que el elemento que va afectar, lo puedes poner justo después del body si quieres.

Aquí tienes un ejemplo, de cómo lo puedes hacer:

.container{ 
/*estilos decorativos*/
  display: inline-block; 
  position: relative;
}

/*ocultar el input sin sacarlo del flujo*/
.hidden-input{ position: fixed; z-index: -1; opacity:0; }

/*estilos decorativos, no importantes*/
.menu{
  margin: 0;
  list-style-type: none;
  border: solid 1px; 
  padding: .5em;
  text-align: center;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  transition: all ease .5s;
  /*Estado inicial antes de activarlos*/
  transform: translateX(-25%);
  opacity: 0;
}

.trigger{
  background: black;
  color: white;
  display: block;
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 0.3em 0.5em;
  font-family: arial;
  /*Agregamos un pointer por usabilidad*/
  cursor: pointer;    
}
/*Cuando el input este chequeado entonces el menu aparece*/
#ctrl:checked ~ .menu{
  opacity: 1;
  transform: translateX(0%);
}

/*Cuando el input no este chequeado entonces flecha "close" desaparece */
#ctrl:not(:checked) ~ .trigger .close,
/*Cuando el input este chequeado entonces flecha "open" desaparece */
#ctrl:checked ~ .trigger .open
{
  display: none;
}

/*Para que quede sin fondo solo debes cambiar los estilos del  label*/
#ctrl:not(:checked) ~ .trigger{
  color: black;
  background: white;
}
<div class="container">
  <input type="checkbox" class="hidden-input" id="ctrl" checked>
  <ul class="menu">
    <li> &#9827; </li>
    <li> &#9829; </li>
    <li> &#9830; </li>
    <li> &#9824; </li>
  </ul>
  <label class="trigger" for="ctrl">
    <span class="open">&#8594;</span>
    <span class="close">&#8592;</span>
  </label>
</div>


Actualización.

Actualice el css y agregue unas líneas de código al final del CSS para que el fondo del botón desaparezca.

Como ya creo que encontraste lo que buscabas y yo ahora sí entendí lo que necesitabas, ahora voy a agregar un ejemplo de lograr lo mismo solo con CSS:

body {
  background: url('http://lorempixel.com/1200/1200/technics');
  background-size: cover;
  background-position: center;
  margin: 0;
  min-height: 100vh;
}

.social,
.social * {
  box-sizing: border-box;
  padding: 0;
  font-family: arial;
}

.social {
  position: fixed;
  top: 50%;
  left: 0;
  display: inline-block;
  transform: translateY(-50%);
  transition: all ease .3s;
}


.hidden-input{ position: fixed; z-index: -1; opacity:0; }

.social ul{ 
  transition: all .3s ease; 
  position: relative;
  z-index: 10;
  left: -1.5em;
}

.social .houdini [class*="icon"],
.social .trigger{
  transition: all .3s ease; 
  text-decoration: none;
  display: inline-block;
  padding: 0.5em 1em;
  color: white;
  padding-left: 3em;
  border-radius: 0 0.6em 0.6em 0;
  width: 5em;
}

.social .houdini [class*="icon"]:hover{
  transform: translateX(1em);
  background: #333;
}

.social .icon-facebook { background: #3b5998; } 
.social .icon-twitter { background: #00abf0; }
.social .icon-youtube { background: #F8030E; }
.social .icon-google { background: #d95232; }
.social .icon-envelop { background: #666666; }
.social .icon-blogger2 { background: #F88103; }

.social .trigger{
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 100%;
  transform: translate(-3.5em, -50%);
  border: solid 1px rgba(255,255,255,.5);
  border-left: none;
  z-index: 1;
  transition: all .3s ease;
  box-shadow: 0 0 1em rgba(0,0,0,.5);
  color: rgb(230,230,230); 
}

.social .trigger:hover{
  transform: translate(-3.0em, -50%);
  background: rgba(0,0,0,.6);
}

/*Cuando el input no este chequeado entonces flecha "close" desaparece */
.social #ctrl:not(:checked) ~ .trigger .close,
/*Cuando el input este chequeado entonces flecha "open" desaparece */
.social #ctrl:checked ~ .trigger .open
{
  display: none;
}

/*Cuando el input no este chequeado se esconde la lista */
.social #ctrl:not(:checked) ~ ul{
  transform: translateX(-5em);
}

/*Cuando el input no este chequeado el label se mueve a la izquierda */
.social #ctrl:not(:checked) ~ .trigger{
  transform: translate(-7.0em, -50%);
}
.social #ctrl:not(:checked) ~ .trigger:hover{
  transform: translate(-6.0em, -50%);
}
<div class="social">
  <input type="checkbox" class="hidden-input" id="ctrl" checked>
  <label class="trigger" for="ctrl">
      <span class="open">&#8594;</span>
      <span class="close">&#8592;</span>
   </label>
  <ul>
    <li class="houdini">
      <a href="#" class="icon-facebook lateral">F</a>
    </li>
    <li class="houdini">
      <a href="#" class="icon-twitter lateral">T</a>
    </li>
    <li class="houdini">
      <a href="#" class="icon-youtube lateral">Y</a>
    </li>
    <li class="houdini">
      <a href="#" class="icon-google lateral">G</a>
    </li>
    <li class="houdini">
      <a href="#" class="icon-envelop lateral">§</a>
    </li>
    <li class="houdini">
      <a href="#" class="icon-blogger2 lateral">B</a>
    </li>
  </ul>
</div>

4
  • 1
    Hola @Edgar Gutiérrez, no llego a entenderte, pues lo que me muestras es lo que tengo yo conseguido si te fijas en mi ejemplo. Ne cesito que el boton quede sin fondo, como una simple flecha.... Gracias. Commented el 14 dic. 2017 a las 0:12
  • 1
    @MiguelEspeso Vi que ya encontraste la solución y yo ya entendí que querías lograr, igual agregó una forma de lograr el mismo efecto que querias, pero solo con css. Commented el 14 dic. 2017 a las 20:54
  • Gutierrez, se agradeceria, he visto algunos ejemplos en codepen de lo que eres capaz de hacer, mi quede sorprendido. Si pones algo me dices, tambien intente usar algo de tu ejemplo DEMO: Cambio de tema css para Marca blanca | No SASS, No JS, el temblor del de un boton, para usarlo en este mismo codigo, y fui incapad. Al fin me ayudo Camilo Vasquez. Un saludo y arme saber.... Commented el 14 dic. 2017 a las 21:04
  • 1
    O.o gracias! Actualice mi respuestas con un demo muy parecido al tuyo, ya que aunque encontraste la solución, yo quise darle un giro de tuerca pero con css. Exitos! Commented el 15 dic. 2017 a las 20:24
1

Espero te funcione… (no entendí muy bien lo del botón transparente)

function ocultar(){
            $(".houdini").hide();
            $(".on").show();
        }
        function mostrar(){
            $(".houdini").show();
            $(".on").hide();
        }
/* CREADO CON AYUDA DE @Flowen */

/* Estilos de las pestañas*/

.houdini {
  display:none;
 }

*{
    margin:0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.social{
    position: fixed;
    left:0;
    top:200px;
    z-index: 2000;
}

.social ul {
    list-style: none;
}

/*.social ul li a {
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms; 
    -0-transition:all 500ms;
    transition: all 500ms
}*/

.social ul li a {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease; 
}

.social ul li  .icon-facebook {background: #3b5998 ;}
.social ul li  .icon-twitter {background:#00abf0 ;}
.social ul li  .icon-youtube {background:#F8030E   ;}
.social ul li  .icon-google {background: #d95232;}
.social ul li  .icon-envelop {background: #666666  ;}
.social ul li  .icon-blogger2 {background:#F88103 ;}
.social ul li  .icon-chevron-left{background: #88F34F;}
.social ul li  .icon-chevron-right{background: #88F34F;}

.social ul li.on .icon-chevron-right{ background: rgba(136, 243, 79, 0.25); }

.social ul li a:hover{
    padding: 10px 30px;
    background: #000;
}

/* Estilos de las fuentes*/

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?fk3lx7');
  src:  url('fonts/icomoon.eot?fk3lx7#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?fk3lx7') format('truetype'),
    url('fonts/icomoon.woff?fk3lx7') format('woff'),
    url('fonts/icomoon.svg?fk3lx7#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-email:before {
  content: "\e900";
}
.icon-info:before {
  content: "\e901";
}
.icon-mail:before {
  content: "\e902";
}
.icon-skype2:before {
  content: "\e903";
}
.icon-linkedin-with-circle:before {
  content: "\e904";
}
.icon-controller-fast-backward:before {
  content: "\e913";
}
.icon-chevron-left:before {
  content: "\e914";
}
.icon-chevron-right:before {
  content: "\e915";
}
.icon-chevron-small-left:before {
  content: "\e916";
}
.icon-chevron-small-right:before {
  content: "\e917";
}
.icon-chevron-thin-left:before {
  content: "\e918";
}
.icon-chevron-thin-right:before {
  content: "\e919";
}
.icon-controller-fast-forward:before {
  content: "\e91a";
}
.icon-game-controller:before {
  content: "\e907";
}
.icon-globe:before {
  content: "\e908";
}
.icon-info2:before {
  content: "\e905";
}
.icon-location-pin:before {
  content: "\e909";
}
.icon-magnifying-glass:before {
  content: "\e90a";
}
.icon-mail3:before {
  content: "\e906";
}
.icon-old-phone:before {
  content: "\e90b";
}
.icon-paper-plane:before {
  content: "\e90c";
}
.icon-price-tag:before {
  content: "\e90d";
}
.icon-tablet:before {
  content: "\e90e";
}
.icon-thumbs-up:before {
  content: "\e90f";
}
.icon-google:before {
  content: "\e910";
}
.icon-youtube3:before {
  content: "\e911";
}
.icon-play:before {
  content: "\e912";
}
.icon-envelop:before {
  content: "\e945";
}
.icon-location:before {
  content: "\e947";
}
.icon-location2:before {
  content: "\e948";
}
.icon-bubbles4:before {
  content: "\e970";
}
.icon-users:before {
  content: "\e972";
}
.icon-cog:before {
  content: "\e994";
}
.icon-cogs:before {
  content: "\e995";
}
.icon-mail2:before {
  content: "\ea84";
}
.icon-mail4:before {
  content: "\ea86";
}
.icon-google-plus2:before {
  content: "\ea8c";
}
.icon-google-plus3:before {
  content: "\ea8d";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-facebook2:before {
  content: "\ea91";
}
.icon-telegram:before {
  content: "\ea95";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-youtube2:before {
  content: "\ea9e";
}
.icon-github:before {
  content: "\eab0";
}
.icon-blogger2:before {
  content: "\eab8";
}
.icon-tumblr2:before {
  content: "\eaba";
}
.icon-skype:before {
  content: "\eac5";
}
.icon-linkedin:before {
  content: "\eac9";
}
.icon-bubble2:before {
  content: "\e96e";
}
.icon-fire:before {
  content: "\e9a9";
}
.icon-lab:before {
  content: "\e9aa";
}
.icon-magnet:before {
  content: "\e9ab";
}
.icon-bin:before {
  content: "\e9ac";
}
.icon-bin2:before {
  content: "\e9ad";
}
.icon-briefcase:before {
  content: "\e9ae";
}
.icon-airplane:before {
  content: "\e9af";
}
.icon-truck:before {
  content: "\e9b0";
}
.icon-road:before {
  content: "\e9b1";
}
.icon-accessibility:before {
  content: "\e9b2";
}
.icon-target:before {
  content: "\e9b3";
}
.icon-shield:before {
  content: "\e9b4";
}
.icon-power:before {
  content: "\e9b5";
}
.icon-switch:before {
  content: "\e9b6";
}
.icon-power-cord:before {
  content: "\e9b7";
}
.icon-clipboard:before {
  content: "\e9b8";
}
.icon-menu4:before {
  content: "\e9c0";
}
.icon-cloud:before {
  content: "\e9c1";
}
.icon-cloud-download:before {
  content: "\e9c2";
}
.icon-cloud-upload:before {
  content: "\e9c3";
}
.icon-cloud-check:before {
  content: "\e9c4";
}
.icon-download2:before {
  content: "\e9c5";
}
.icon-point-up:before {
  content: "\ea03";
}
.icon-plus:before {
  content: "\ea0a";
}
.icon-play2:before {
  content: "\ea15";
}
.icon-play3:before {
  content: "\ea1c";
}
.icon-backward2:before {
  content: "\ea1f";
}
.icon-forward3:before {
  content: "\ea20";
}
.icon-arrow-right:before {
  content: "\ea34";
}
.icon-arrow-left:before {
  content: "\ea38";
}
.icon-arrow-right2:before {
  content: "\ea3c";
}
.icon-arrow-left2:before {
  content: "\ea40";
}
.icon-circle-right:before {
  content: "\ea42";
}
.icon-circle-left:before {
  content: "\ea44";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-facebook3:before {
  content: "\ea92";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Social</title>
    <link rel="stylesheet" href="redes.css">
    <link rel="stylesheet" href="redes-fonts.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
</head>
<body>

   <div class="social">
       <ul>
           <li class="houdini"><a href="https://www.facebook.com/profile.php?id=100009248037432" class="icon-facebook lateral"></a></li>
           <li class="houdini"><a href="https://twitter.com/laparramiguel" class="icon-twitter lateral"></a></li>
           <li class="houdini"><a href="http://www." class="icon-youtube lateral"></a></li>
           <li class="houdini"><a href="https://plus.google.com/u/0/109747958435546403812" class="icon-google lateral"></a></li>
           <li class="houdini"><a href="mailto: [email protected]" class="icon-envelop lateral"></a></li>
           <li class="houdini"><a href="https://paseandoporlanubedelared.blogspot.com.es/" class="icon-blogger2 lateral"></a></li>
           <li class="off houdini"><a href="#" class="icon-chevron-left lateral" onclick="ocultar()">&lsaquo;</a></li>
           <li class="on"><a href="#" class="icon-chevron-right" onclick="mostrar()" id="mostrar">&rsaquo;</a></li>
       </ul>   
   </div>
   <script src="redes.js"></script>
</body>
</html>

1
  • 1
    Sanchez, gracias por el apoyo. El ejemplo de Camilo Vasquez se parece mas a lo que estaba buscando, auque tu idea esta lograda tambien. Un saludo. Commented el 14 dic. 2017 a las 7:44
1

Buenas amigo espero esto sea lo que buscas

la idea es agregar un botón que tenga una position:absolute y así posicionar lo fuera de los demás botones.

  • al ejecutar el evento click le agregamos la clase del icono correspondiente y le quitamos la del otro icono.
  • Despues es agregarle el estilo de css transform:traslate() que cuando esta visible le asignamos un -100% que hace que se oculte hacia la izquierda y si esta oculto le volvemos a poner 0%

Para la funcionalidad de toggle use una variable que cada vez que se hace click en el botón cambia su valor al contrario del que tiene visible=!visible esea que si es true se va a cambiar a false y viceversa.

saludos espero te ayude amigo .

var visible = true
$("#btn-redes").click(function(){
if(visible){
  $(this).removeClass("fa-angle-left");
  $(this).addClass("fa-angle-right");
  $(".social").css({"transform":"translate(-100%)"})
} else {
  $(this).removeClass("fa-angle-right");
  $(this).addClass("fa-angle-left");
  $(".social").css({"transform":"translate(0%)"})
}
  visible=!visible
})
/* CREADO CON AYUDA DE @Flowen */
.btn-toggle {
  position:absolute;
  top:50%;
  transform: translate(0,-50%);
  padding: 10px;
    padding-left: 55px;
    border: 0px;
    outline: none;
    background: rgb(255, 255, 255);
    box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.1);
    z-index: 10;
    border-radius: 0px 10px 10px 0px;
    cursor: pointer;
    transition: all .3s ease;//agregado para animacion
}
.btn-toggle:hover {
padding-left: 65px;
}
/* Estilos de las pestañas*/

#mostrar{
    display:none;
    }

*{
    margin:0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.social{
    position: fixed;
    left:0;
    top:20px;
    z-index: 2000;
    transition: all .3s ease;//agregado para animacion
}

.social ul {
    list-style: none;
    z-index:20;
    position:relative;
}

/*.social ul li a {
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms; 
    -0-transition:all 500ms;
    transition: all 500ms
}*/

.social ul li a {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease; 
}

.social ul li  .icon-facebook {background: #3b5998 ;}
.social ul li  .icon-twitter {background:#00abf0 ;}
.social ul li  .icon-youtube {background:#F8030E   ;}
.social ul li  .icon-google {background: #d95232;}
.social ul li  .icon-envelop {background: #666666  ;}
.social ul li  .icon-blogger2 {background:#F88103 ;}
.social ul li  .icon-chevron-left{background: #88F34F;}
.social ul li  .icon-chevron-right{background: #88F34F;}

.social ul li a:hover{
    padding: 10px 30px;
    background: #000;
}

/* Estilos de las fuentes*/

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?fk3lx7');
  src:  url('fonts/icomoon.eot?fk3lx7#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?fk3lx7') format('truetype'),
    url('fonts/icomoon.woff?fk3lx7') format('woff'),
    url('fonts/icomoon.svg?fk3lx7#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-email:before {
  content: "\e900";
}
.icon-info:before {
  content: "\e901";
}
.icon-mail:before {
  content: "\e902";
}
.icon-skype2:before {
  content: "\e903";
}
.icon-linkedin-with-circle:before {
  content: "\e904";
}
.icon-controller-fast-backward:before {
  content: "\e913";
}
.icon-chevron-left:before {
  content: "\e914";
}
.icon-chevron-right:before {
  content: "\e915";
}
.icon-chevron-small-left:before {
  content: "\e916";
}
.icon-chevron-small-right:before {
  content: "\e917";
}
.icon-chevron-thin-left:before {
  content: "\e918";
}
.icon-chevron-thin-right:before {
  content: "\e919";
}
.icon-controller-fast-forward:before {
  content: "\e91a";
}
.icon-game-controller:before {
  content: "\e907";
}
.icon-globe:before {
  content: "\e908";
}
.icon-info2:before {
  content: "\e905";
}
.icon-location-pin:before {
  content: "\e909";
}
.icon-magnifying-glass:before {
  content: "\e90a";
}
.icon-mail3:before {
  content: "\e906";
}
.icon-old-phone:before {
  content: "\e90b";
}
.icon-paper-plane:before {
  content: "\e90c";
}
.icon-price-tag:before {
  content: "\e90d";
}
.icon-tablet:before {
  content: "\e90e";
}
.icon-thumbs-up:before {
  content: "\e90f";
}
.icon-google:before {
  content: "\e910";
}
.icon-youtube3:before {
  content: "\e911";
}
.icon-play:before {
  content: "\e912";
}
.icon-envelop:before {
  content: "\e945";
}
.icon-location:before {
  content: "\e947";
}
.icon-location2:before {
  content: "\e948";
}
.icon-bubbles4:before {
  content: "\e970";
}
.icon-users:before {
  content: "\e972";
}
.icon-cog:before {
  content: "\e994";
}
.icon-cogs:before {
  content: "\e995";
}
.icon-mail2:before {
  content: "\ea84";
}
.icon-mail4:before {
  content: "\ea86";
}
.icon-google-plus2:before {
  content: "\ea8c";
}
.icon-google-plus3:before {
  content: "\ea8d";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-facebook2:before {
  content: "\ea91";
}
.icon-telegram:before {
  content: "\ea95";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-youtube2:before {
  content: "\ea9e";
}
.icon-github:before {
  content: "\eab0";
}
.icon-blogger2:before {
  content: "\eab8";
}
.icon-tumblr2:before {
  content: "\eaba";
}
.icon-skype:before {
  content: "\eac5";
}
.icon-linkedin:before {
  content: "\eac9";
}
.icon-bubble2:before {
  content: "\e96e";
}
.icon-fire:before {
  content: "\e9a9";
}
.icon-lab:before {
  content: "\e9aa";
}
.icon-magnet:before {
  content: "\e9ab";
}
.icon-bin:before {
  content: "\e9ac";
}
.icon-bin2:before {
  content: "\e9ad";
}
.icon-briefcase:before {
  content: "\e9ae";
}
.icon-airplane:before {
  content: "\e9af";
}
.icon-truck:before {
  content: "\e9b0";
}
.icon-road:before {
  content: "\e9b1";
}
.icon-accessibility:before {
  content: "\e9b2";
}
.icon-target:before {
  content: "\e9b3";
}
.icon-shield:before {
  content: "\e9b4";
}
.icon-power:before {
  content: "\e9b5";
}
.icon-switch:before {
  content: "\e9b6";
}
.icon-power-cord:before {
  content: "\e9b7";
}
.icon-clipboard:before {
  content: "\e9b8";
}
.icon-menu4:before {
  content: "\e9c0";
}
.icon-cloud:before {
  content: "\e9c1";
}
.icon-cloud-download:before {
  content: "\e9c2";
}
.icon-cloud-upload:before {
  content: "\e9c3";
}
.icon-cloud-check:before {
  content: "\e9c4";
}
.icon-download2:before {
  content: "\e9c5";
}
.icon-point-up:before {
  content: "\ea03";
}
.icon-plus:before {
  content: "\ea0a";
}
.icon-play2:before {
  content: "\ea15";
}
.icon-play3:before {
  content: "\ea1c";
}
.icon-backward2:before {
  content: "\ea1f";
}
.icon-forward3:before {
  content: "\ea20";
}
.icon-arrow-right:before {
  content: "\ea34";
}
.icon-arrow-left:before {
  content: "\ea38";
}
.icon-arrow-right2:before {
  content: "\ea3c";
}
.icon-arrow-left2:before {
  content: "\ea40";
}
.icon-circle-right:before {
  content: "\ea42";
}
.icon-circle-left:before {
  content: "\ea44";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-facebook3:before {
  content: "\ea92";
}
<script src="https://use.fontawesome.com/277a14a9cb.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Social</title>
    <link rel="stylesheet" href="redes.css">
    <link rel="stylesheet" href="redes-fonts.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
</head>
<body>

   <div class="social">
  
   <button id="btn-redes" class="btn-toggle fa fa-angle-left" aria-hidden="true" type="button" name="button"></button>
       <ul>
           <li><a href="https://www.facebook.com/profile.php?id=100009248037432" class="icon-facebook lateral"></a></li>
           <li><a href="https://twitter.com/laparramiguel" class="icon-twitter lateral"></a></li>
           <li><a href="http://www." class="icon-youtube lateral"></a></li>
           <li><a href="https://plus.google.com/u/0/109747958435546403812" class="icon-google lateral"></a></li>
           <li><a href="mailto: [email protected]" class="icon-envelop lateral"></a></li>
           <li><a href="https://paseandoporlanubedelared.blogspot.com.es/" class="icon-blogger2 lateral"></a></li>
           <!--<li><a href="#" class="icon-chevron-left lateral" onclick="ocultar()"></a></li>
           <li><a href="#" class="icon-chevron-right" onclick="mostrar()" id="mostrar"></a></li> -->
       </ul>   
   </div>
   <script src="redes.js"></script>
</body>
</html>

Iconos usados para el ejemplo: fontawesome

2
  • 1
    Gracias @Luis Daniel Rovira Contreras, ya me habia acostado cuando respondiste. Tu propuesta esta genial, solo me queda ver la de Camilo Vasquez. Muchas gracias por el apoyo. Commented el 14 dic. 2017 a las 7:46
  • que bueno amigo espero te ayude Commented el 14 dic. 2017 a las 13:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.