Maybe then create a new file that contains your CSS code for the button and import it inside of your main.js file
But this way you will face a bigger and larger challenge of
if you are using a button inside of other components say for example ion-buttons then you will need to expose/leak the ion-button CSS using :part() from the Ion-buttons
Also, imagine if the buttons are nested 2-3 level down for some reason, so apart from ion-buttons the button are also nested inside of several other components such as cards>card-content OR cards>card-footer OR ion-list>ion-items, etc then you will need to expose the same CSS code again and again for all such edge cases…
I may be wrong as so far I have only worked and styled local components and only a few handfuls of the core CSS are coming from a theme file but what I found so far is that I always encounter the
shadow-root no matter if I have the style scoped or come from an scss file…
I should stick to the solution i mentioned in my prev comment.