Improve disabled button UX with custom message and no hover effect
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s
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:
parent
a961ade257
commit
ee5eed49e6
4 changed files with 82 additions and 74 deletions
|
|
@ -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%;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue