!important doesnt work for an a href button in navbar

I have hover color change on a hrefs. I turned one of the a href to an a href button. It has its own class name, hover animation etc but because of a href has hover animation for color, button's color is changing too. Even tho I said "white!important", it still goes for a href's "orange". What should i do?

html

<li class="nav-item">
                  <a
                    class=" nav-link active bg-orange fw-normal mx-1 px-4 py-2 text-white rounded-pill"
                    aria-current="page"
                    href="#"
                    >Apply Now and Get %0 Commission<i
                      class="bi bi-arrow-down-right ms-3"
                    ></i
                  ></a>
                </li>

css

#main-menu a:hover, a:hover{color: #be4006!important;}

.bg-orange{color: #white!important;}

I wrote on top. Even tho I said "white!important", it still goes for a href's "orange". What should i do?

I see that you are using !important to override the Bootstrap text-white class, but this is what is causing issues with your code. You can't apply !important to the same property more than once. Better not use text-white.

#main-menu a:hover, a:hover{color: #be4006;}
.bg-orange:hover{color: white!important;}