How to best assign primary and secondary styles for multiple functional buttons?

Question

I have a page that opens to a search bar with a search button beside it. On hitting the search button, a listing will appear below that section. There's a button at the bottom to submit after selecting from the listing.

With my definition of primary & secondary buttons, the search button is a primary button on the page when it loads. But after the user searches, the submit button would be the primary button. At this point I do not want the search button to be primary as it deviates focus. How should the buttons be assigned in such a scenario?

Also if there's any question/blog/article that explains button uses in such scenarios please direct me to those.

Answer 1

After search button is clicked another interaction starts. You could use some tricks to distinguish it, see sketch. To achieve it some Gestalt principles are used as well as up-to-down reading pattern.

Answer 2

Often times people use gray for secondary buttons, and assign a positive color like green for the current primary action button. Many companies use the primary brand color for the actionable primary buttons.

You have to guide people and have the design mold to the experience. If you select something and the focus shifts to something else. The last primary state of focus needs to bump back so the new primary action can take place.