/* 按钮动画css */

.explode-circle {
  animation: explode 0.6s forwards;
}

.desplode-circle {
  animation: desplode 0.6s forwards;
}

@keyframes explode {
  0% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(42, 53, 80, 0.2);
  }
  100% {
    width: 800px;
    height: 800px;
    margin-left: -300px;
    margin-top: -300px;
    background-color: rgba(255, 255, 255);
  }
}

@keyframes desplode {
  0% {
    width: 800px;
    height: 800px;
    margin-left: -300px;
    margin-top: -300px;
    background-color: rgba(255, 255, 255, 0.8);
  }
  100% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(255, 255, 255, 0.5);
  }
}

/* 主题色颜色按钮的动画 */
.su_custom_color .su_button_circle.explode-circle {
  animation: explode-custom 0.5s forwards;
}
.su_custom_color .su_button_circle.desplode-circle {
  animation: desplode-custom 0.5s forwards;
}

@keyframes explode-custom {
  0% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(171, 132, 103, 0.2);
  }
  100% {
    width: 800px;
    height: 800px;
    margin-left: -300px;
    margin-top: -300px;
    background-color: #ab8467;
  }
}

@keyframes desplode-custom {
  0% {
    width: 800px;
    height: 800px;
    margin-left: -300px;
    margin-top: -300px;
    background-color: rgba(171, 132, 103, 0.8);
  }
  100% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(171, 132, 103, 0.5);
  }
}

/* hover文字效果 */
.su_custom_color.button_su:hover span {
  color: #fff !important;
}
.su_custom_color.button_su:hover iconify-icon {
  color: #fff !important;
}