button click animation for many buttons

Question

I am trying to add animation on button click so I am able to show animation on button but I want to show animation on every button and for that I can not create n number of animation classes for n number of buttons.

Currently I added one div for one button which I animating. But it's difficult to add separate div for separate button.

HTML Code :-

<a data-toggle="tab" href="#paper">
    <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Paper" onclick="buttonMediaPressed(this.id)">
    Paper
   </button>
</a>                               
<a data-toggle="tab" href="#news" >
  <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_News" onclick="buttonMediaPressed(this.id)">
    News  
</button>
</a>   
<a data-toggle="tab" href="#web" >
   <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Website" onclick="buttonMediaPressed(this.id)">
       Website 
      <div class="circle"></div>                                    
   </button>
</a>

Currently I have added animation classes for website button only. But I need to add it for other button to. I have almost 40-50 buttons and I can not create same number of divs.

CSS Code

.circle {  


position: absolute;
    width : 50px !important;    
    height : 35px !important;
    margin-top:-32px;
    margin-left:-12px;
    border:2px solid green !important;
    -webkit-transform: scale(4);
    -moz-transform: scale(0);
    transform: scale(0);
    -webkit-border-radius : 50%;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%; 
    }

   .open.circle {
     opacity: 100;
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     transform: scale(1);

  }


.circle a {
  text-decoration: none;
  color: white;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  text-align: center; 

}

.circle a:hover {
  color: #eef;
}

JavaScript Code

function buttonMediaPressed(clicked_btn_id){

        console.log("In buttonMediaPressed function :- " +clicked_btn_id);

        else if(clicked_btn_id.localeCompare("btn_BT") == 0){       
            $('.circle').toggleClass('open');   
        setTimeout(function(){
            //change image back
            $('.circle').toggleClass('open');   
        }, 300);                
}

I am creating animation which shown in below screen. After button click circle will in and out in the area of button.

Please suggest me how to do this. Or any good reference.

Answer 1

As far as I understand the question, the problem is having to add those divs to buttons, right?

If the function is already bound to these buttons you can add div dynamically on click. https://jsfiddle.net/njcLzv9y/

Here's the code

buttonMediaPressed = function(clicked_btn_id) {
  console.log("In buttonMediaPressed function :- " + clicked_btn_id);
  var circle = $('#' + clicked_btn_id + ' .circle');
  if (!circle.length) {
    $('#' + clicked_btn_id).append('<div class="circle"></div>');
    circle = $('#' + clicked_btn_id + ' .circle');
  }
  setTimeout(function() {
    circle.toggleClass('open');

  })
  setTimeout(function() {
    //change image back
    circle.toggleClass('open');

  }, 300);
}

.circle {
  position: absolute;
  width: 50px !important;
  height: 35px !important;
  margin-top: -32px;
  margin-left: -12px;
  border: 2px solid green !important;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  -webkit-border-radius: 50%;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  opacity: 0;
}
.open.circle {
  opacity: 100;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}
.circle a {
  text-decoration: none;
  color: white;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  text-align: center;
}
.circle a:hover {
  color: #eef;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a data-toggle="tab" href="#paper">
  <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Paper" onclick="buttonMediaPressed(this.id)">
    Paper
  </button>
</a>
<a data-toggle="tab" href="#news">
  <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_News" onclick="buttonMediaPressed(this.id)">
    News
    <span></span>
  </button>
</a>
<a data-toggle="tab" href="#web">
  <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Website" onclick="buttonMediaPressed(this.id)">
    Website
    <div class="circle"></div>
  </button>
</a>