Buat kesan hover yang mengubah butang menu menjadi bentuk x dengan versi klon berbayang

Question

Mula-mula saya ingin mengakui bahawa tajuk saya mengelirukan dan saya minta maaf mengenainya. Apa yang saya ingin capai ialah kesan berikut pada hover:

Tapak web saya ada di sini https://wordpress-493302-3130963.cloudwaysapps.com/

Saya telah berjaya mencapai separuh daripada apa yang saya ingin capai menggunakan peralihan css, tetapi saya tidak dapat melihat salinan bayangan butang dibuat seperti yang ditunjukkan dalam imej di atas. CSS saya adalah seperti berikut

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

Jika ini boleh dilaksanakan menggunakan JS atau sesuatu yang lain yang juga mungkin, tetapi CSS lebih diutamakan.

Tidak termasuk html yang dijana daripada pemalam menu mega, tetapi ini boleh dilakukan jika mahu.

Answer 1

Saya syorkan buat 2 butang/satu 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

Anda boleh menggunakan ::before untuk menggunakan kesan ini.

.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