Trying to create a share button for social media with an animated button using CSS. However, encountering issues when trying to display multiple buttons on the same page for different content. The problem arises when clicking the second button, as it triggers animation in the first button instead. How can I ensure that the CSS is applied correctly to every button on my page?
Here's the fiddle: https://jsfiddle.net/2s6w4hq7/
This is my HTML:
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
<a href="#">Share on Twitter</a>
</li>
<li class="facebook">
<a href="#">Share on Facebook</a>
</li>
<li class="googleplus">
<a href="#">Share on Google+</a>
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
<a href="#">Share on Twitter</a>
</li>
<li class="facebook">
<a href="#">Share on Facebook</a>
</li>
<li class="googleplus">
<a href="#">Share on Google+</a>
</li>
</ul>
</div>
</div>
This is the CSS:
/*
Using FontAwesome for icons
https://fortawesome.github.io/Font-Awesome/
*/
.share-button {
position: relative;
width: 50px;
margin: 5px;
}
... (CSS continues)