Create a hover effect that transforms the menu button into an x ​​shape with a shadowed clone version

Question

First I want to admit that my title is confusing and I'm sorry for that. What I want to achieve is the following effect when hovering:

My website is here https://wordpress-493302-3130963.cloudwaysapps.com/

I have successfully accomplished half of what I want to achieve using css transitions, but am unable to see the shadow copy of the button being created as shown in the image above. My CSS is as follows

.cta-button-menu:hover {
        transform:rotateZ(45deg) !important;
        background: #21B6CD !important;
        color: white !important;
        transition: 1s;
    }

If this can be implemented using JS or something else that would also be possible, but CSS is preferred.

Does not include the html generated from the mega menu plugin, but this can be done if desired.

Answer 1

I recommend making 2 buttons/one label:

body {
  padding: 4em;
  background-color: black;
}

.button {
  position: relative;
}

.firstButton,
.secondButton {
  position: absolute;
  display: inline-block;
  padding: 1em;
  text-align: center;
  color: white;
  text-decoration: none;
  border: 1px solid white;
}
.firstButton {
  visibility: hidden;
}

.button:hover .firstButton {
  transform: rotateZ(45deg);
  background: #E83054;
  visibility: visible;
}
.button:hover .secondButton {
  transform: rotateZ(-45deg);
  background: #21B6CD;
}  

  

    Book Now
    Book Now
  

Answer 2

You can use ::before to apply this effect.

.wrapper{
height:300px;
background-color:gray;
}

.btn, .btn::before{
  font-size:2rem;
  color:white;
  width:200px;
  height:70px;
  border:2px solid white;
  transition:all 0.3s linear;
  display:flex;
  justify-content:center;
  align-items:center;
}

.btn{
  position:relative;
  top:30%;
  left:30%;
  background-color:transparent;
}
  
.btn:hover {
   background-color:#21b6cd;
   transform: rotateZ(45deg);
   border:none;
}

.btn::before {
  content:"Book Now";
  background-color:transparent;
  position:absolute;
}

.btn:hover::before{
  transform: rotateZ(-90deg);
  background-color:#e72f54;
  border:none;
}

  Book Now