How to set transition none for a specific css property

Question

I have an element with the transition property

// app.css
.myBtn{
   width: 100px;
   transition: all 6s ease-out;
   background: blue;
}

.myBtn:hover{
   width: 300px;
   background-color: green;
}

Now, I want to set transition:none only for background-color property.

Note: I cannot change app.css file code, I have to write on some other file.

Any helpful answer will be appreciated.

Answer 1

I think you could override the transition property value leaving out background but you would have to specify each property you do want to transition.

.myBtn{
    transition-property: width, height... etc;
}