CSS плюс, чтобы закрыть кнопку

Question

Мне нужен дизайн CSS, в котором квадратная кнопка меняет знак плюс, чтобы пересекать не квадрат, а круг, я уже продемонстрировал здесь.но я не могу изменить как мое требование

https://codepen.io/tapos007/pen/odxQgW

    		$(function() {
        //do something
    
          $(".btn-square").click({animateIn: "circleShape", animateOut: "squareShape"}, animate_function);
     
          
          function animate_function(event){
              if( $(this).hasClass(event.data.animateIn) ) {
                    $(this).removeClass(event.data.animateIn).addClass(event.data.animateOut);
                   }
                else if( $(this).hasClass(event.data.animateOut) ) {
                   $(this).removeClass(event.data.animateOut).addClass(event.data.animateIn);
                }
                else {
                  $(this).addClass('animated ' + event.data.animateIn);
                }     
          }
          
      //end do something     
    	});
    

    //Variables
    $btn-round-size:100px;
    $btn-round-rotate:135deg;
    $btn-default-color:blue;
    $btn-close-color:red;
    
    //Styles
    body {
      font-family: sans-serif;
    }
    
    .btn-round {
      width:$btn-round-size;
    	height:$btn-round-size;
    	border-radius:$btn-round-size;
      background-color:$btn-default-color;
    }
    
    .btn-square {
      width:$btn-round-size;
    	height:$btn-round-size;
      background-color:blue;
    }
    
    .close{
      position: relative;
      display: inline-block;
      width: 50px;
      height: 50px;
      top:25px;
      left:25px;
      overflow: hidden;
    
      &::before, &::after {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%;
        top: 50%;
        left: 0;
        margin-top: -1px;
        background: #fff;
      }
      &::before {
         transform:rotate(0deg);
        }
     &::after {
         transform:rotate(90deg);
        }
    } 
    
    
    
    //Animations
    .animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    
    @-webkit-keyframes plusButton {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -$btn-round-rotate);
        transform: rotate3d(0, 0, 1, -$btn-round-rotate);
        background-color:$btn-close-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        background-color:$btn-default-color;
      }
    }
    
    @keyframes plusButton {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        background-color:$btn-default-color;
      }
    }
    
    .plusButton {
      -webkit-animation-name: plusButton;
      animation-name: plusButton;
    }
    
    
    @-webkit-keyframes closeButton {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        background-color:$btn-default-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
      }
    }
    
    @keyframes closeButton {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        background-color:$btn-default-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
      }
    }
    
    .closeButton {
      -webkit-animation-name: closeButton;
      animation-name: closeButton;
    }
    
    @-webkit-keyframes circleShape {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        background-color:$btn-default-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
        border-radius: $btn-round-size;
      }
    }
    
    @keyframes circleShape {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        background-color:$btn-default-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
        border-radius: $btn-round-size;
      }
    }
    
    .circleShape {
      -webkit-animation-name: circleShape;
      animation-name: circleShape;
    }
    
    @-webkit-keyframes squareShape {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
        border-radius: $btn-round-size;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        background-color:$btn-default-color;
        border-radius: 0px;
      }
    }
    
    @keyframes squareShape {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
        border-radius: $btn-round-size;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        background-color:$btn-default-color;
        border-radius: 0px;
      }
    }
    
    .squareShape {
      -webkit-animation-name: squareShape;
      animation-name: squareShape;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-square">
      <span class="close"></span>
    </div> 
    

Answer 1

Для этого не нужно использовать javascript или ключевые кадры.
Я чувствую, что ваш кодекс сложен не так много!

Вот ваш код, модифицированный, с моими комментариями:

body {
  font-family: sans-serif;
}

.btn-square {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 1s; /* Added */
}

.close {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  top: 25px;
  left: 25px;
  overflow: hidden;
  transition: transform 1s; /* Added */
}

.close::before,
.close::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #fff;
}

.close::before {
  transform: rotate(0deg);
}

.close::after {
  transform: rotate(90deg);
}

/* Added the below code */
.btn-square:hover {
  background-color: red;
}

.btn-square:hover .close {
  transform: rotate(-135deg);
}

/* And removed all other code */

<div class="btn-square">
  <span class="close"></span>
</div>

Надеюсь, это поможет.

Answer 2

Вам не нужен JavaScript для этого.

@charset "UTF-8";
.closeBtn {
  transition: all 200ms ease-in-out;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: teal;
  padding: 0;
}
.closeBtn:before {
  transition: all 200ms ease-in-out;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 20px;
  content: "×";
  transform: rotate(45deg);
  margin: 0 auto;
}
.closeBtn:hover {
  border-radius: 100%;
  cursor: pointer;
  background-color: red;
}
.closeBtn:hover:before {
  transform: rotate(0deg);
}

<button class="closeBtn" />

Ссылка на codepen для sass-версии