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>