0

Hola tengo unos botones de redes sociales y tengo el problema que acoplarles a mi código, los iconos de los botones se hacen mas pequeños que lo que se ve en mi ejemplo, haciéndolos ilegibles. Si bien hay mucho código en mi web para mostrar, no se cual sera el culpable de ello, y sin mostrarlo tampoco puedan ayudarme. Otro problema es que quería que aparecieran los botones solo pasando el ratón, no se si se podrá hacer con css o sera javascript. Le dejo lo que tengo si pueden ayudarme. Gracias.

NOTA: Añadí el css con html, porque si no no funciona

$('.share-button').on('click', function(event) {
		event.preventDefault();
		if( $('.button').hasClass('show') ){
			$('.first-circle').removeClass('rotate1');
			$('.second-circle').removeClass('rotate2');
			$('.third-circle').removeClass('rotate3');
			$('.forth-circle').removeClass('rotate4');
			$('.fifth-circle').removeClass('rotate5');
			
			setTimeout(function(){
				$('.button').removeClass('show');
			} , 300);
		}else{
			$('.button').addClass('show');
			setTimeout(function(){
				$('.first-circle').addClass('rotate1');
				$('.second-circle').addClass('rotate2');
				$('.third-circle').addClass('rotate3');
				$('.forth-circle').addClass('rotate4');
				$('.fifth-circle').addClass('rotate5');
			} , 300);
		}
	});
html {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
}

/*----------------------
	Body 
------------------------*/
body {
  background: #236E6B;
}

/*----------------------
	Text
------------------------*/
h2 {
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  margin-top: 50px;
  font-family: 'Cormorant Upright', serif;
}

/*----------------------
	Share-button 
------------------------*/
.share-button {
  width: 65px;
  height: 65px;
  position: absolute;
  top: 50%;
  z-index: 1;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  background: #fff;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.share-button:before {
  content: "\f1e0";
  position: absolute;
  color: #757676;
  font-size: 1.4rem;
  font-family: FontAwesome;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
.share-button:hover {
  -webkit-box-shadow: 0 0 10px 1px #494848;
  box-shadow: 0 0 10px 1px #494848;
}

/*----------------------
	Circle
------------------------*/
.circle {
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  position: absolute;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.circle .button {
  width: 65px;
  height: 65px;
  position: absolute;
  top: -33px;
  right: -32px;
  z-index: -1;
  background: #fff;
  border-radius: 50%;
  visibility: hidden;
  cursor: pointer;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.circle .button:before {
  position: absolute;
  font-size: 1.4rem;
  font-family: FontAwesome;
  top: 50%;
  left: 50%;
  cursor: pointer;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.circle .button:hover:before {
  color: #fff;
}
.circle .show {
  visibility: visible;
  top: -115px;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}

.first-circle .button:before {
  color: lightcoral;
}
.first-circle .button:hover {
  background: lightcoral;
}

.second-circle .button:before {
  color: #00ABF1;
}
.second-circle .button:hover {
  background: #00ABF1;
}

.third-circle .button:before {
  color: #4767AA;
}
.third-circle .button:hover {
  background: #4767AA;
}

.forth-circle .button:before {
  color: #4D9FCA;
}
.forth-circle .button:hover {
  background: #4D9FCA;
}

.fifth-circle .button:before {
  color: #F26798;
}
.fifth-circle .button:hover {
  background: #F26798;
}

.rotate1 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
.rotate1 .button {
  -ms-transform: translateX(0) translateY(0) rotate(0deg);
  transform: translateX(0) translateY(0) rotate(0deg);
  -webkit-transform: translateX(0) translateY(0) rotate(0deg);
  -moz-transform: translateX(0) translateY(0) rotate(0deg);
}

.rotate2 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(72deg);
  transform: translateX(-50%) translateY(-50%) rotate(72deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(72deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(72deg);
}
.rotate2 .button {
  -ms-transform: translateX(0) translateY(0) rotate(-72deg);
  transform: translateX(0) translateY(0) rotate(-72deg);
  -webkit-transform: translateX(0) translateY(0) rotate(-72deg);
  -moz-transform: translateX(0) translateY(0) rotate(-72deg);
}

.rotate3 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(144deg);
  transform: translateX(-50%) translateY(-50%) rotate(144deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(144deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(144deg);
}
.rotate3 .button {
  -ms-transform: translateX(0) translateY(0) rotate(-144deg);
  transform: translateX(0) translateY(0) rotate(-144deg);
  -webkit-transform: translateX(0) translateY(0) rotate(-144deg);
  -moz-transform: translateX(0) translateY(0) rotate(-144deg);
}

.rotate4 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(216deg);
  transform: translateX(-50%) translateY(-50%) rotate(216deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(216deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(216deg);
}
.rotate4 .button {
  -ms-transform: translateX(0) translateY(0) rotate(-216deg);
  transform: translateX(0) translateY(0) rotate(-216deg);
  -webkit-transform: translateX(0) translateY(0) rotate(-216deg);
  -moz-transform: translateX(0) translateY(0) rotate(-216deg);
}

.rotate5 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(288deg);
  transform: translateX(-50%) translateY(-50%) rotate(288deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(288deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(288deg);
}
.rotate5 .button {
  -ms-transform: translateX(0) translateY(0) rotate(72deg);
  transform: translateX(0) translateY(0) rotate(72deg);
  -webkit-transform: translateX(0) translateY(0) rotate(72deg);
  -moz-transform: translateX(0) translateY(0) rotate(72deg);
}

.first-circle .button:before {
  content: "\f0d5";
}

.second-circle .button:before {
  content: "\f099";
}

.third-circle .button:before {
  content: "\f09a";
}

.forth-circle .button:before {
  content: "\f0e1";
}

.fifth-circle .button:before {
  content: "\f17d";
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Share button</title>
  <link href="https://fonts.googleapis.com/css?family=Arima+Madurai|Cormorant+Upright|Farsan" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>

  <style>
    /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */

    html {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    }

    body {
      font-size: 16px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
      -webkit-box-sizing: inherit;
      -moz-box-sizing: inherit;
    }

    /*----------------------
	Body 
------------------------*/

    body {
      background: #236E6B;
    }

    /*----------------------
	Text
------------------------*/

    h2 {
      text-align: center;
      color: #fff;
      font-size: 1.5rem;
      margin-top: 50px;
      font-family: 'Cormorant Upright', serif;
    }

    /*----------------------
	Share-button 
------------------------*/

    .share-button {
      width: 65px;
      height: 65px;
      position: absolute;
      top: 50%;
      z-index: 1;
      left: 50%;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      background: #fff;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .share-button:before {
      content: "\f1e0";
      position: absolute;
      color: #757676;
      font-size: 1.4rem;
      font-family: FontAwesome;
      top: 50%;
      left: 50%;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }

    .share-button:hover {
      -webkit-box-shadow: 0 0 10px 1px #494848;
      box-shadow: 0 0 10px 1px #494848;
    }

    /*----------------------
	Circle
------------------------*/

    .circle {
      top: 50%;
      left: 50%;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      position: absolute;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .circle .button {
      width: 65px;
      height: 65px;
      position: absolute;
      top: -33px;
      right: -32px;
      z-index: -1;
      background: #fff;
      border-radius: 50%;
      visibility: hidden;
      cursor: pointer;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .circle .button:before {
      position: absolute;
      font-size: 1.4rem;
      font-family: FontAwesome;
      top: 50%;
      left: 50%;
      cursor: pointer;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .circle .button:hover:before {
      color: #fff;
    }

    .circle .show {
      visibility: visible;
      top: -115px;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .first-circle .button:before {
      color: lightcoral;
    }

    .first-circle .button:hover {
      background: lightcoral;
    }

    .second-circle .button:before {
      color: #00ABF1;
    }

    .second-circle .button:hover {
      background: #00ABF1;
    }

    .third-circle .button:before {
      color: #4767AA;
    }

    .third-circle .button:hover {
      background: #4767AA;
    }

    .forth-circle .button:before {
      color: #4D9FCA;
    }

    .forth-circle .button:hover {
      background: #4D9FCA;
    }

    .fifth-circle .button:before {
      color: #F26798;
    }

    .fifth-circle .button:hover {
      background: #F26798;
    }

    .rotate1 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }

    .rotate1 .button {
      -ms-transform: translateX(0) translateY(0) rotate(0deg);
      transform: translateX(0) translateY(0) rotate(0deg);
      -webkit-transform: translateX(0) translateY(0) rotate(0deg);
      -moz-transform: translateX(0) translateY(0) rotate(0deg);
    }

    .rotate2 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(72deg);
      transform: translateX(-50%) translateY(-50%) rotate(72deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(72deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(72deg);
    }

    .rotate2 .button {
      -ms-transform: translateX(0) translateY(0) rotate(-72deg);
      transform: translateX(0) translateY(0) rotate(-72deg);
      -webkit-transform: translateX(0) translateY(0) rotate(-72deg);
      -moz-transform: translateX(0) translateY(0) rotate(-72deg);
    }

    .rotate3 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(144deg);
      transform: translateX(-50%) translateY(-50%) rotate(144deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(144deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(144deg);
    }

    .rotate3 .button {
      -ms-transform: translateX(0) translateY(0) rotate(-144deg);
      transform: translateX(0) translateY(0) rotate(-144deg);
      -webkit-transform: translateX(0) translateY(0) rotate(-144deg);
      -moz-transform: translateX(0) translateY(0) rotate(-144deg);
    }

    .rotate4 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(216deg);
      transform: translateX(-50%) translateY(-50%) rotate(216deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(216deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(216deg);
    }

    .rotate4 .button {
      -ms-transform: translateX(0) translateY(0) rotate(-216deg);
      transform: translateX(0) translateY(0) rotate(-216deg);
      -webkit-transform: translateX(0) translateY(0) rotate(-216deg);
      -moz-transform: translateX(0) translateY(0) rotate(-216deg);
    }

    .rotate5 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(288deg);
      transform: translateX(-50%) translateY(-50%) rotate(288deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(288deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(288deg);
    }

    .rotate5 .button {
      -ms-transform: translateX(0) translateY(0) rotate(72deg);
      transform: translateX(0) translateY(0) rotate(72deg);
      -webkit-transform: translateX(0) translateY(0) rotate(72deg);
      -moz-transform: translateX(0) translateY(0) rotate(72deg);
    }

    .first-circle .button:before {
      content: "\f0d5";
    }

    .second-circle .button:before {
      content: "\f099";
    }

    .third-circle .button:before {
      content: "\f09a";
    }

    .forth-circle .button:before {
      content: "\f0e1";
    }

    .fifth-circle .button:before {
      content: "\f17d";
    }
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <h2>Button For Share</h2>

  <div class="share-button"></div>

  <div class="circle first-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle second-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle third-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle forth-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle fifth-circle">
    <a href="#" class="button"></a>
  </div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src="js/index.js"></script>




</body>

</html>

1
  • Tendríamos que ver el código de tu web para reproducir el caso anómalo. De otra manera lo que vemos pareciera ser el comportamiento correcto
    – ffflabs
    Commented el 26 feb. 2018 a las 16:22

1 respuesta 1

1

Para hacer que se visualice las opciones cuando pasas el puntero por el botón de Compartir debes usar la función mouseenter que se actúa como la funcionalidad que describes. Pero recuerda que para que se cierre las opciones deberá pasar de nuevo el puntero por encima del botón. Por otro lado el problema de las imágenes pequeñas que mencionas debes revisarlo en tu pagina inspeccionando el elemento con la consola de desarrollador y ver que estilos le son aplicados y poder cambiar esos mismos. Si puedes adiciona los estilos que encuentres para actualizar mi respuesta. Te dejo la información de las funciones que puedes incluir con la funcionalidad de .on() Aqui.

$('.share-button').on('mouseenter', function(event) {
		event.preventDefault();
		if( $('.button').hasClass('show') ){
			$('.first-circle').removeClass('rotate1');
			$('.second-circle').removeClass('rotate2');
			$('.third-circle').removeClass('rotate3');
			$('.forth-circle').removeClass('rotate4');
			$('.fifth-circle').removeClass('rotate5');
			
			setTimeout(function(){
				$('.button').removeClass('show');
			} , 300);
		}else{
			$('.button').addClass('show');
			setTimeout(function(){
				$('.first-circle').addClass('rotate1');
				$('.second-circle').addClass('rotate2');
				$('.third-circle').addClass('rotate3');
				$('.forth-circle').addClass('rotate4');
				$('.fifth-circle').addClass('rotate5');
			} , 300);
		}
	});
html {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
}

/*----------------------
	Body 
------------------------*/
body {
  background: #236E6B;
}

/*----------------------
	Text
------------------------*/
h2 {
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  margin-top: 50px;
  font-family: 'Cormorant Upright', serif;
}

/*----------------------
	Share-button 
------------------------*/
.share-button {
  width: 65px;
  height: 65px;
  position: absolute;
  top: 50%;
  z-index: 1;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  background: #fff;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.share-button:before {
  content: "\f1e0";
  position: absolute;
  color: #757676;
  font-size: 1.4rem;
  font-family: FontAwesome;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
.share-button:hover {
  -webkit-box-shadow: 0 0 10px 1px #494848;
  box-shadow: 0 0 10px 1px #494848;
}

/*----------------------
	Circle
------------------------*/
.circle {
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  position: absolute;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.circle .button {
  width: 65px;
  height: 65px;
  position: absolute;
  top: -33px;
  right: -32px;
  z-index: -1;
  background: #fff;
  border-radius: 50%;
  visibility: hidden;
  cursor: pointer;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.circle .button:before {
  position: absolute;
  font-size: 1.4rem;
  font-family: FontAwesome;
  top: 50%;
  left: 50%;
  cursor: pointer;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.circle .button:hover:before {
  color: #fff;
}
.circle .show {
  visibility: visible;
  top: -115px;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}

.first-circle .button:before {
  color: lightcoral;
}
.first-circle .button:hover {
  background: lightcoral;
}

.second-circle .button:before {
  color: #00ABF1;
}
.second-circle .button:hover {
  background: #00ABF1;
}

.third-circle .button:before {
  color: #4767AA;
}
.third-circle .button:hover {
  background: #4767AA;
}

.forth-circle .button:before {
  color: #4D9FCA;
}
.forth-circle .button:hover {
  background: #4D9FCA;
}

.fifth-circle .button:before {
  color: #F26798;
}
.fifth-circle .button:hover {
  background: #F26798;
}

.rotate1 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
.rotate1 .button {
  -ms-transform: translateX(0) translateY(0) rotate(0deg);
  transform: translateX(0) translateY(0) rotate(0deg);
  -webkit-transform: translateX(0) translateY(0) rotate(0deg);
  -moz-transform: translateX(0) translateY(0) rotate(0deg);
}

.rotate2 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(72deg);
  transform: translateX(-50%) translateY(-50%) rotate(72deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(72deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(72deg);
}
.rotate2 .button {
  -ms-transform: translateX(0) translateY(0) rotate(-72deg);
  transform: translateX(0) translateY(0) rotate(-72deg);
  -webkit-transform: translateX(0) translateY(0) rotate(-72deg);
  -moz-transform: translateX(0) translateY(0) rotate(-72deg);
}

.rotate3 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(144deg);
  transform: translateX(-50%) translateY(-50%) rotate(144deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(144deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(144deg);
}
.rotate3 .button {
  -ms-transform: translateX(0) translateY(0) rotate(-144deg);
  transform: translateX(0) translateY(0) rotate(-144deg);
  -webkit-transform: translateX(0) translateY(0) rotate(-144deg);
  -moz-transform: translateX(0) translateY(0) rotate(-144deg);
}

.rotate4 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(216deg);
  transform: translateX(-50%) translateY(-50%) rotate(216deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(216deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(216deg);
}
.rotate4 .button {
  -ms-transform: translateX(0) translateY(0) rotate(-216deg);
  transform: translateX(0) translateY(0) rotate(-216deg);
  -webkit-transform: translateX(0) translateY(0) rotate(-216deg);
  -moz-transform: translateX(0) translateY(0) rotate(-216deg);
}

.rotate5 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(288deg);
  transform: translateX(-50%) translateY(-50%) rotate(288deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(288deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(288deg);
}
.rotate5 .button {
  -ms-transform: translateX(0) translateY(0) rotate(72deg);
  transform: translateX(0) translateY(0) rotate(72deg);
  -webkit-transform: translateX(0) translateY(0) rotate(72deg);
  -moz-transform: translateX(0) translateY(0) rotate(72deg);
}

.first-circle .button:before {
  content: "\f0d5";
}

.second-circle .button:before {
  content: "\f099";
}

.third-circle .button:before {
  content: "\f09a";
}

.forth-circle .button:before {
  content: "\f0e1";
}

.fifth-circle .button:before {
  content: "\f17d";
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Share button</title>
  <link href="https://fonts.googleapis.com/css?family=Arima+Madurai|Cormorant+Upright|Farsan" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>

  <style>
    /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */

    html {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    }

    body {
      font-size: 16px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
      -webkit-box-sizing: inherit;
      -moz-box-sizing: inherit;
    }

    /*----------------------
	Body 
------------------------*/

    body {
      background: #236E6B;
    }

    /*----------------------
	Text
------------------------*/

    h2 {
      text-align: center;
      color: #fff;
      font-size: 1.5rem;
      margin-top: 50px;
      font-family: 'Cormorant Upright', serif;
    }

    /*----------------------
	Share-button 
------------------------*/

    .share-button {
      width: 65px;
      height: 65px;
      position: absolute;
      top: 50%;
      z-index: 1;
      left: 50%;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      background: #fff;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .share-button:before {
      content: "\f1e0";
      position: absolute;
      color: #757676;
      font-size: 1.4rem;
      font-family: FontAwesome;
      top: 50%;
      left: 50%;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }

    .share-button:hover {
      -webkit-box-shadow: 0 0 10px 1px #494848;
      box-shadow: 0 0 10px 1px #494848;
    }

    /*----------------------
	Circle
------------------------*/

    .circle {
      top: 50%;
      left: 50%;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      position: absolute;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .circle .button {
      width: 65px;
      height: 65px;
      position: absolute;
      top: -33px;
      right: -32px;
      z-index: -1;
      background: #fff;
      border-radius: 50%;
      visibility: hidden;
      cursor: pointer;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .circle .button:before {
      position: absolute;
      font-size: 1.4rem;
      font-family: FontAwesome;
      top: 50%;
      left: 50%;
      cursor: pointer;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .circle .button:hover:before {
      color: #fff;
    }

    .circle .show {
      visibility: visible;
      top: -115px;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .first-circle .button:before {
      color: lightcoral;
    }

    .first-circle .button:hover {
      background: lightcoral;
    }

    .second-circle .button:before {
      color: #00ABF1;
    }

    .second-circle .button:hover {
      background: #00ABF1;
    }

    .third-circle .button:before {
      color: #4767AA;
    }

    .third-circle .button:hover {
      background: #4767AA;
    }

    .forth-circle .button:before {
      color: #4D9FCA;
    }

    .forth-circle .button:hover {
      background: #4D9FCA;
    }

    .fifth-circle .button:before {
      color: #F26798;
    }

    .fifth-circle .button:hover {
      background: #F26798;
    }

    .rotate1 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }

    .rotate1 .button {
      -ms-transform: translateX(0) translateY(0) rotate(0deg);
      transform: translateX(0) translateY(0) rotate(0deg);
      -webkit-transform: translateX(0) translateY(0) rotate(0deg);
      -moz-transform: translateX(0) translateY(0) rotate(0deg);
    }

    .rotate2 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(72deg);
      transform: translateX(-50%) translateY(-50%) rotate(72deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(72deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(72deg);
    }

    .rotate2 .button {
      -ms-transform: translateX(0) translateY(0) rotate(-72deg);
      transform: translateX(0) translateY(0) rotate(-72deg);
      -webkit-transform: translateX(0) translateY(0) rotate(-72deg);
      -moz-transform: translateX(0) translateY(0) rotate(-72deg);
    }

    .rotate3 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(144deg);
      transform: translateX(-50%) translateY(-50%) rotate(144deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(144deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(144deg);
    }

    .rotate3 .button {
      -ms-transform: translateX(0) translateY(0) rotate(-144deg);
      transform: translateX(0) translateY(0) rotate(-144deg);
      -webkit-transform: translateX(0) translateY(0) rotate(-144deg);
      -moz-transform: translateX(0) translateY(0) rotate(-144deg);
    }

    .rotate4 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(216deg);
      transform: translateX(-50%) translateY(-50%) rotate(216deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(216deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(216deg);
    }

    .rotate4 .button {
      -ms-transform: translateX(0) translateY(0) rotate(-216deg);
      transform: translateX(0) translateY(0) rotate(-216deg);
      -webkit-transform: translateX(0) translateY(0) rotate(-216deg);
      -moz-transform: translateX(0) translateY(0) rotate(-216deg);
    }

    .rotate5 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(288deg);
      transform: translateX(-50%) translateY(-50%) rotate(288deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(288deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(288deg);
    }

    .rotate5 .button {
      -ms-transform: translateX(0) translateY(0) rotate(72deg);
      transform: translateX(0) translateY(0) rotate(72deg);
      -webkit-transform: translateX(0) translateY(0) rotate(72deg);
      -moz-transform: translateX(0) translateY(0) rotate(72deg);
    }

    .first-circle .button:before {
      content: "\f0d5";
    }

    .second-circle .button:before {
      content: "\f099";
    }

    .third-circle .button:before {
      content: "\f09a";
    }

    .forth-circle .button:before {
      content: "\f0e1";
    }

    .fifth-circle .button:before {
      content: "\f17d";
    }
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <h2>Button For Share</h2>

  <div class="share-button"></div>

  <div class="circle first-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle second-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle third-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle forth-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle fifth-circle">
    <a href="#" class="button"></a>
  </div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src="js/index.js"></script>




</body>

</html>

5
  • Gracias @bercklyn Carlosviza , funciona. Pero he estado revisando el enlace que me mostraste y no encuentro la forma de que se oculten de nuevo automáticamente al quitar el ratón. He probado con el ejemplo de los elementos de una barra de navegación pero no me funciono,¿ abría forma de hacerlo ?,
    – Mari Cruz
    Commented el 26 feb. 2018 a las 20:06
  • 1
    Pense lo mismo acerca de esa funcionalidad pero si analizas bien la función que describes nunca podrás realizar la opción de compartir con ninguna red ya que ni bien salgas del opción se ocultaran las opciones. Commented el 26 feb. 2018 a las 20:08
  • Bueno, pero queda un margen para dar al botón que se quiera... Osea que eso no seria problema.
    – Mari Cruz
    Commented el 26 feb. 2018 a las 20:15
  • 1
    Usa el evento "mouseleave" que es la versión contraria de mouseenter . Trate de brindarte un pagina con la lista completa de eventos de Jquery pero cuando busque en su documentación no la pude conseguir así que ten en cuenta que esos no son todos los eventos que puedes delegar con la función .on() . Commented el 26 feb. 2018 a las 20:23
  • Gracias, todavía se me hace un poco grande javascript
    – Mari Cruz
    Commented el 26 feb. 2018 a las 20:25

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.