<div class="btn ">
  <span class="btn__text">Кнопка</span>
  <span class="btn__icon "></span>
</div>

.btn{
  display:inline-block;
  cursor:pointer;
  background:red;
  padding:10px 16px;
  border-radius: 20px;
  color: #FFFFFF;
  outline: none;
  position:relative;
  z-index: 1;
  & .btn__icon{
    display: none;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    right: 10px;
    width: 20px;
    transition: opacity 0.4s;
    height: 20px;
    background: #FFFFFF;
    border-radius: 100px;
    z-index: 2;
    
    &.active{
      display: block;
      opacity: 2;
      visibility: visible;
      z-index: 2;
    }
    &:before, &:after{
      position: absolute;
      content: "";
      top:27%;
      left:45%;
      background: blue;
      border-radius: 4px;
      height: 10px;
      width: 2px;
    }
    
    &:before{
      transform: rotate(-45deg);
    }
    
    &:after{
      transform: rotate(45deg);
    }
  }
  
  &.active{
    padding-right:44px;
    background: #CC1A18;
  }
}

var currentCount = 0;
$(document).ready(function() {
  $('.btn').on('click', function(event) {
    if(!$(this).hasClass('active') && currentCount==0 ){
      console.log(currentCount);
      $(this).addClass('active');
      $(this).find('.btn__icon').addClass('active');
      return currentCount++;
    }
    else{
      return false;
    }
  });
  $('.btn__icon').on('click', function(event) {
    
    event.stopPropagation();
    console.log(currentCount);
    $(this).removeClass('active');
    $(this).parent(".btn").removeClass('active');
    return currentCount--;
  });
});