Pada asasnya, apabila saya hover, saya mahu kesannya kelihatan seperti ini:
Laman web saya ada di sini
Kod adalah seperti berikutAbaikan! Penting :
.cta-button-menu, .cta-button-menu::before {
transition:all 0.3s linear !important;
width: 120px !important;
height: 50px !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
}
.cta-button-menu:hover {
transform:rotateZ(-45deg) !important;
background: #21B6CD !important;
color: white !important;
}
.cta-button-menu::before {
content:"Book Now" !important;
background-color:transparent !important;
position:absolute !important;
@include main-font($white, 16px !important, $font-bold !important);
}
.cta-button-menu:hover::before{
transform: rotateZ(90deg) !important;
background-color:#e72f54 !important;
border:none !important;
}
Atas sebab tertentu saya tidak boleh mendapatkan butang biru untuk bertindih dengan butang merah. Saya tidak dapat memahaminya
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tukar warna dalam
.cta-button-menu:hoversetbackground: #e72f54和.cta-button-menu:hover::beforesetbackground-color:#21B6CD. Dan juga menukar ijazah. Semoga ini berguna untuk andaul { margin-top: 60px; } .cta-button-menu, .cta-button-menu::before { transition: all 0.3s linear !important; width: 120px !important; height: 50px !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; } .cta-button-menu:hover { transform: rotateZ(45deg) !important; background: #e72f54 !important; color: white !important; } .cta-button-menu::before { content: "Book Now" !important; background-color: transparent !important; position: absolute !important; @include main-font($white, 16px !important, $font-bold !important); } .cta-button-menu:hover::before { transform: rotateZ(-90deg) !important; background-color: #21B6CD !important; border: none !important; }