Improve disabled button UX with custom message and no hover effect
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s

- Disable hover animation on disabled add-to-cart button
- Display "Choisissez une option" message when button is disabled
- Add cursor: not-allowed and opacity styling for disabled state
- Format SCSS for better code consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2025-12-19 17:05:00 +01:00
parent a961ade257
commit ee5eed49e6
4 changed files with 82 additions and 74 deletions

View file

@ -125,7 +125,8 @@ main {
text-decoration: none;
cursor: pointer;
}
.btn__default .icon, .btn__default .txt {
.btn__default .icon,
.btn__default .txt {
z-index: 10;
}
.btn__default .icon {
@ -160,13 +161,17 @@ main {
z-index: 0;
transition: width 0.2s;
}
.btn__default:hover .txt {
.btn__default:hover:not(:disabled) .txt {
color: var(--color-bg);
display: block;
}
.btn__default:hover::after {
.btn__default:hover:not(:disabled)::after {
width: 100%;
}
.btn__default:disabled {
cursor: not-allowed;
opacity: 0.6;
}
#btn--don__mobile {
width: 100%;