Buat kesan hover yang mengubah butang menu menjadi bentuk x dengan versi klon berbayang
P粉546257913
P粉546257913 2024-04-04 11:55:21
0
2
408

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.

P粉546257913
P粉546257913

membalas semua(2)
P粉316890884

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;
}  
  
P粉670838735

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;
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan