Hey there, I've created a bubble menu with a button using code. It functions perfectly on Chrome but seems to have some issues on Mozilla Firefox. You can check it out and give it a try.
$(".roundedBallOuter").click(function(e) {
$(this).toggleClass("clicked");
});body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.roundedBallOuter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.roundedBall {
width: 200px;
height: 200px;
background: #ccc;
border-radius: 100%;
position: relative;
transition: all 0.3s ease;
cursor: pointer;
}
.roundedBall:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
box-shadow: 0 0 10px #555;
transition: all 0.3s ease;
}
.subBall {
width: 50px;
height: 50px;
background: #0077ab;
border-radius: 100%;
position: absolute;
transition: all 0.5s ease;
z-index: -1;
}
.roundedBallOuter.clicked .subBall.linkedIn {
transform: translate(-10em);
-webkit-transform: translate(-10em);
-moz-transform: translate(-10em);
-ms-transform: translate(-10em);
transition: all 0.5s ease;
}
.roundedBallOuter.clicked .subBall.facebook {
transform: rotate(45deg) translate(-10em) rotate(-45deg);
-webkit-transform: rotate(45deg) translate(-10em) rotate(-45deg);
-ms-transform: rotate(45deg) translate(-10em) rotate(-45deg);
-moz-transform: rotate(45deg) translate(-10em) rotate(-45deg);
transition: all 0.5s ease;
}
.roundedBallOuter.clicked .subBall.twitter {
transform: rotate(90deg) translate(-10em) rotate(-90deg);
-webkit-transform: rotate(90deg) translate(-10em) rotate(-90deg);
-moz-transform: rotate(90deg) translate(-10em) rotate(-90deg);
-ms-transform: rotate(90deg) translate(-10em) rotate(-90deg);
transition: all 0.5s ease;
}
.more {
font-size: 20px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.more>span {
color: #0077ab;
display: block;
font-style: italic;
font-size: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="roundedBallOuter">
<div class="roundedBall">
<span class="more"><span>Click</span> for more information</span>
</div>
<div class="linkedIn subBall"></div>
<div class="facebook subBall"></div>
<div class="twitter subBall"></div>
</div>I would really appreciate your help in fixing this bug. Thanks so much in advance!