Apply CSS animation class for many instance in one page

I try to make share button for social media with animated button in CSS. But I want some button to display in one page. For different content. But I found this didn't work for second button. If the second button is clicked, the first button that animated instead of second. My Question is how to make the CSS applied to every button in my page?

This is 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>

and this is the CSS :

/* 
Using FontAwesome for icons 
https://fortawesome.github.io/Font-Awesome/
*/
.share-button {
  position: relative;
  width: 50px;
  margin: 5px;
}

.toggle {
  position: relative;
  width: 50px;
  height: 50px;
  z-index: 10;
  display: block;
  cursor: pointer;
  color: #fff;
  background-color: #3D3D3D;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 50%;
}
.toggle:hover {
  background-color: #0a0a0a;
}
.toggle:after {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  font-family: 'FontAwesome';
  content: "\f1e0";
  line-height: 50px;
  font-size: 29px;
  text-align: center;
  left: -2px;
}
.toggle-input {
  display: none;
}
.toggle-input:checked + .toggle:after, .toggle-input:checked + .toggle:before {
  background-color: #fff;
  content: "";
  height: 3px;
  width: 30px;
  position: absolute;
  left: 10px;
  top: 23px;
}
.toggle-input:checked + .toggle:after {
  -webkit-animation: bar1 0.3s forwards;
          animation: bar1 0.3s forwards;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.toggle-input:checked + .toggle:before {
  -webkit-animation: bar2 0.3s forwards;
          animation: bar2 0.3s forwards;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.network-list li {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  opacity: 0;
}
.network-list .twitter {
  left: 50px;
  top: -50px;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
          transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
}
.network-list .facebook {
  left: 50px;
  top: 0;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
          transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  -webkit-transition: all 0.15s ease 0.3s;
  transition: all 0.15s ease 0.3s;
}
.network-list .googleplus {
  left: 50px;
  top: 50px;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
          transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transition: all 0.15s ease 0.15s;
  transition: all 0.15s ease 0.15s;
}
.network-list a {
  color: #fff;
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  overflow: hidden;
  line-height: 50px;
  text-indent: 120%;
  text-decoration: none;
}
.network-list a:before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 50px;
  height: 50px;
  font-family: 'FontAwesome';
  font-size: 26px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  line-height: 50px;
  text-indent: 0;
}
.network-list .twitter a {
  background-color: #00C3F3;
  border-radius: 50%;
}
.network-list .twitter a:before {
  content: "\f099";
}
.network-list .twitter a:hover:before {
  box-shadow: inset 0 0 0 2px #00C3F3;
}
.network-list .facebook a {
  background-color: #2C609B;
  border-radius: 50%;
}
.network-list .facebook a:before {
  content: "\f09a";
}
.network-list .facebook a:hover:before {
  box-shadow: inset 0 0 0 2px #2C609B;
}
.network-list .googleplus a {
  background-color: #EC3F25;
  border-radius: 50%;
}
.network-list .googleplus a:before {
  content: "\f0d5";
}
.network-list .googleplus a:hover:before {
  box-shadow: inset 0 0 0 2px #EC3F25;
}

input:checked ~ .network-list li {
  opacity: 1;
  top: 0;
}
input:checked ~ .network-list .twitter {
  left: 50px;
  top: -50px;
  -webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
          transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
  -webkit-transition: all 0.25s ease 0.4s;
  transition: all 0.25s ease 0.4s;
}
input:checked ~ .network-list .facebook {
  left: 50px;
  top: 0;
  -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
          transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
  -webkit-transition: all 0.25s ease 0.2s;
  transition: all 0.25s ease 0.2s;
}
input:checked ~ .network-list .googleplus {
  left: 50px;
  top: 50px;
  -webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
          transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
  -webkit-transition: all 0.25s ease 0.6s;
  transition: all 0.25s ease 0.6s;
}

@-webkit-keyframes bar1 {
  0% {
    content: "\f1e0";
    width: 46px;
    height: 50px;
    background-color: transparent;
    -webkit-transform: scale(1);
            transform: scale(1);
    top: 0;
    left: 0;
    opacity: 1;
  }
  50% {
    background-color: transparent;
    content: "\f1e0";
    width: 46px;
    height: 50px;
    top: 0;
    left: 0;
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0;
  }
  50.001% {
    background-color: #fff;
    left: 10px;
    top: 22px;
    content: "";
    height: 3px;
    width: 30px;
    -webkit-transform: rotate(45deg), scale(0.2);
            transform: rotate(45deg), scale(0.2);
  }
  100% {
    -webkit-transform: rotate(45deg), scale(1);
            transform: rotate(45deg), scale(1);
    opacity: 1;
  }
}

@keyframes bar1 {
  0% {
    content: "\f1e0";
    width: 46px;
    height: 50px;
    background-color: transparent;
    -webkit-transform: scale(1);
            transform: scale(1);
    top: 0;
    left: 0;
    opacity: 1;
  }
  50% {
    background-color: transparent;
    content: "\f1e0";
    width: 46px;
    height: 50px;
    top: 0;
    left: 0;
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0;
  }
  50.001% {
    background-color: #fff;
    left: 10px;
    top: 22px;
    content: "";
    height: 3px;
    width: 30px;
    -webkit-transform: rotate(45deg), scale(0.2);
            transform: rotate(45deg), scale(0.2);
  }
  100% {
    -webkit-transform: rotate(45deg), scale(1);
            transform: rotate(45deg), scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes bar2 {
  0% {
    background-color: transparent;
    -webkit-transform: 0 scale(0.2);
            transform: 0 scale(0.2);
    opacity: 0;
  }
  50% {
    background-color: transparent;
    -webkit-transform: 0 scale(0.2);
            transform: 0 scale(0.2);
    opacity: 0;
  }
  50.1% {
    background-color: transparent;
    -webkit-transform: rotate(-45deg) scale(0.2);
            transform: rotate(-45deg) scale(0.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(-45deg) scale(1);
            transform: rotate(-45deg) scale(1);
    opacity: 1;
  }
}
@keyframes bar2 {
  0% {
    background-color: transparent;
    -webkit-transform: 0 scale(0.2);
            transform: 0 scale(0.2);
    opacity: 0;
  }
  50% {
    background-color: transparent;
    -webkit-transform: 0 scale(0.2);
            transform: 0 scale(0.2);
    opacity: 0;
  }
  50.1% {
    background-color: transparent;
    -webkit-transform: rotate(-45deg) scale(0.2);
            transform: rotate(-45deg) scale(0.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(-45deg) scale(1);
            transform: rotate(-45deg) scale(1);
    opacity: 1;
  }
}

Answers 1

  • You just need to define different ID's for Checkbox and label under div of class share-button. Please refer below code:

          <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-input1" type="checkbox" />
              <label for="toggle-input1" 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>
    

Related Articles