With a code sample I am creating share buttons. It is a first button from which when passing the mouse the said buttons appear.
At first there were 4 buttons and I added another one.
The problem is that this one appears below instead of doing it online like the others.
Another problem, which you will see in the example, is that when the page is loaded the buttons appear open, which should not happen until we move the mouse over, and it is all due to having added the fifth one.
What do I need to change so that all five (or as many as needed) appear in line and not appear expanded before hovering?
I leave the sample:
// Force a hover to see the effect
var share = document.querySelector('.share');
setTimeout(function () {
share.classList.add("hover");
}, 1000);
setTimeout(function () {
share.classList.remove("hover");
}, 3000);
body {
font-family: 'Roboto';
background-color: #e5eef3;
text-align: center;
color: #f1ce64;
font-size: 28px;
}
a {
color: #f1ce64;
}
.share {
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top: -40px;
border-radius: 80px;
}
.share span {
width: 200px;
line-height: 80px;
display: inline-block;
font-weight: 700;
text-transform: uppercase;
position: absolute;
left: 50%;
margin-left: -100px;
opacity: 1;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
pointer-events: none;
}
.share nav {
font-size: 0;
}
.share a {
line-height: 80px;
width: 80px;
text-align: center;
display: inline-block;
background-color: #ffffff;
color: #ffffff;
overflow: hidden;
opacity: 1;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0 -20px;
-webkit-box-shadow: 3px 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 3px 1px 3px rgba(0, 0, 0, 0.1);
}
.share a:nth-child(1) {
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
margin-left: 0;
}
.share a:nth-child(1):hover {
background-color: #61c5ec;
}
.share a:nth-child(2):hover {
background-color: #3B5998;
}
.share a:nth-child(3):hover {
background-color: #ea4335;
}
.share a:nth-child(4):hover {
background-color: #D40AC0;
}
.share a:nth-child(5) {
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
margin-right: 0;
}
.share a:nth-child(5):hover {
background-color: #064D96;
}
.share:hover span, .share.hover span {
opacity: 0;
}
.share:hover a, .share.hover a {
border-radius: 50%;
margin: 0 10px;
color: #f1ce64;
font-size: 28px;
}
.share:hover a:hover, .share.hover a:hover {
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Social share button</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:700'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="share">
<span>Share</span>
<nav>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
<a href="#">
<i class="fa fa-google"></i>
</a>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</nav>
</div>
<script src="js/index.js"></script>
</body>
</html>
All you need is to give the content more space (500px width, for example) by changing:
In order for it to be correctly centered, you have to change the offset to half of 500px (250px).
Here is the example working on a single line:
If you want them not to show open at the beginning, you just have to comment the code you use to force the animations.
The element has a size defined by pixels, to add a new sub-element that does not break the line, simply increase the width of the element:
Changes in your example: