こんにちは
I looked at your code and have some ideas to resolve some issues.
- There are several ways to solve the hover issue for the button:
/* 1 */
button {
margin-top: 2.5625rem;
width: 18rem;
height: 3.5rem;
border-radius: 8rem;
font-style: normal;
font-weight: 700;
font-size: 1.125rem;
line-height: 1.4375rem;
text-align: center;
color: #FFFFFF;
background: linear-gradient(180deg, #303B59, transparent), #303B59;
transition: background-color 1s;
}
button:hover {
cursor: pointer;
background: linear-gradient(180deg, #7755FF, transparent), #2F2CE9;
background-color: #2F2CE9;
color: #fff;
}
The second way to solve the issue is by creating a pseudo-object.
/* 2 */
button {
margin-top: 2.5625rem;
width: 18rem;
height: 3.5rem;
border-radius: 8rem;
font-style: normal;
font-weight: 700;
font-size: 1.125rem;
line-height: 1.4375rem;
text-align: center;
color: #FFFFFF;
position: relative;
z-index: 2;
background: #303B59;
overflow: hidden;
}
button::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 100%;
left: 0%;
background: linear-gradient(180deg, #7755FF, transparent), #2F2CE9;
z-index: -1;
transition: all 0.3s ease 0s;
}
button:hover{
cursor: pointer;
}
button:hover::after{
top: 0%;
}
2 To solve other issues, it is necessary to rewrite the code a bit.
Write to me if you're interested.
Happy coding!
I wrote こんにちは because I saw <html lang="ja"> in your code. So, I apologize if I offended you.