Erstellen Sie einen Hover-Effekt, der die Menüschaltfläche mit einer schattierten Klonversion in eine X-Form umwandelt

Question

Zuerst möchte ich zugeben, dass mein Titel verwirrend ist, und das tut mir leid. Was ich erreichen möchte, ist der folgende Effekt beim Schweben:

Meine Website ist hier https://wordpress-493302-3130963.cloudwaysapps.com/

Ich habe die Hälfte dessen, was ich mit CSS-Übergängen erreichen möchte, erfolgreich erreicht, kann aber die Schattenkopie der erstellten Schaltfläche nicht sehen, wie im Bild oben gezeigt. Mein CSS ist wie folgt

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

Wenn dies mit JS oder etwas anderem implementiert werden kann, ist das auch möglich, aber CSS wird bevorzugt.

Beinhaltet kein vom Mega-Menü-Plugin generiertes HTML, kann aber auf Wunsch durchgeführt werden.

Answer 1

我建议制作 2 个按钮/一个标签：

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

您可以使用 ::before 来应用此效果。

.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