Tengo una entrada como botón y no quiero permitir que los usuarios vean el efecto de desplazamiento cuando se agrega la clase deshabilitada al nodo principal:
.btn { font-family: "IRANSansWeb"; max-width: 200px; width: 100%; height: 40px; font-weight: 600; margin: 5px 0; margin-top: 15px; cursor: pointer; opacity: 1; background: linear-gradient(to right, #9672fb, #d772fb); border-radius: 30px; border: none; color: white; box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%); transition: 0.2s; } .btn:active { transform: translateY(5px) !important; box-shadow: none !important; } .btn:not(.disabled):hover { transform: translateY(1px); box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%); } .submit-container.disabled .submit { opacity: 0.5; cursor: default; } <div class="submit-container disabled"> <div class="spinner center"> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> </div> <input class="btn submit" id="submit-pay" type="submit" value="BUY" /> </div>Como puede ver hasta ahora, incluso deshabilitado se agrega al elemento principal, el efecto de desplazamiento funciona.
Intenté esto sin suerte:
.btn:not(.disabled):hoverMueva el :not condicional al padre:
.btn { font-family: "IRANSansWeb"; max-width: 200px; width: 100%; height: 40px; font-weight: 600; margin: 5px 0; margin-top: 15px; cursor: pointer; opacity: 1; background: linear-gradient(to right, #9672fb, #d772fb); border-radius: 30px; border: none; color: white; box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%); transition: 0.2s; } .submit-container:not(.disabled) .btn:active { transform: translateY(5px) !important; box-shadow: none !important; } .submit-container:not(.disabled) .btn:hover { transform: translateY(1px); box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%); } .submit-container.disabled .submit { opacity: 0.5; cursor: default; } <div class="submit-container disabled"> <div class="spinner center"> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> </div> <input class="btn submit" id="submit-pay" type="submit" value="BUY" /> </div> <div class="submit-container"> <div class="spinner center"> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> </div> <input class="btn submit" id="submit-pay" type="submit" value="BUY" /> </div>