Hello, I have some buttons for social networks and I have the problem of attaching them to my code, the icons of the buttons become smaller than what is seen in my example, making them unreadable. Although there is a lot of code on my website to show, I don't know what is to blame for it, and without showing it you can't help me either. Another problem is that I wanted the buttons to appear only by hovering over the mouse, I don't know if it can be done with css or it will be javascript. I leave you what I have if you can help me. Thanks.
NOTE: I added the css with html, because otherwise it doesn't work
$('.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>
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.