Share Button

Share Button / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Share Button

Botón para compartir en redes sociales, en este caso Facebook, Google+ y Twitter.

La idea original es que vaya a la altura del footer, de modo que este presente en todas las páginas de nuestra web.

El CSS:

Lo destacable es el movimiento de apertura.

	.menu-open-button {
	  z-index: 2;
	  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	  -webkit-transition-duration: 400ms;
	  transition-duration: 400ms;
	  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
	  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
	  cursor: pointer;
	  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
	}

	.menu-open:checked + .menu-open-button {
	  -webkit-transition-timing-function: linear;
	  transition-timing-function: linear;
	  -webkit-transition-duration: 200ms;
	  transition-duration: 200ms;
	  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
	  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
	}

	Y el movimiento de cada uno de los elementos, aquí un ejemplo:

	.menu-open:checked ~ .menu-item:nth-child(3) {
	  transition-duration: 180ms;
	  -webkit-transition-duration: 180ms;
	  -webkit-transform: translate3d(0.08361px, -84.99997px, 0);
	  transform: translate3d(0.08361px, -84.99997px, 0);
	}

El HTML:

Fundamental añadir este script jQuery/JS:

<script src="https://cdn.rawgit.com/OpenShare/openshare/develop/dist/openshare.js"></script>

Dentro de nav "menuShare", añadimos las llamadas a la redes sociales que queramos compartir.

Donde "data-open-share-link" es donde ha de colocarse la URL que queramos compartir.

Puedes ver este ejemplo y descargarlo en mi perfil de Codepen.

Mariano J.

Completo y elegante, me gusta. Enhorabuena.

Elena Jiménez / 28-04-2017

Muchas gracias Elena, espero que te sea útil.

Mariano J. / 28-04-2017

¿Vas a seguir subiendo cosas a Codepen? La tarjeta de perfil con jQuery, veo que tiene muchas posibilidades.

Elena Jiménez / 28-04-2017

Justo la he usado para un template que acabo de subir al blog. Y a Codepen seguiré subiendo código siempre que pueda, gracias por seguirme.

Mariano J. / 28-04-2017

Escribe un comentario

Tu email no se hará visible