[Solved] css plus to close button

by


There is no need to use javascript or keyframes to do that.
I feel like your codepen is complicated for not much!

Here is your code, modified, with my comments: 

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>

I hope it helps.

1

solved css plus to close button