Is that more or less verbose than
button {
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 0.375rem;
border: 1px solid #0a0a0a;
background-color: #171717;
padding: 6px 12px;
color: #f5f5f5;
box-shadow:
inset 0 1px #525252,
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
button::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
}
button:hover {
background-color: #262626;
}
button:active {
background-color: #0a0a0a;
box-shadow:
inset 0 1px #262626,
0 0 #0000;
}
Sure, separating the code into a CSS file means it's not in your HTML but that doesn't mean it doesn't exist. Similarly you can move the button out to a component and reference that if you want to hide the code.
I find it easier to locate things in the HTML broken into components because the style is co located with the object being styled. I find it much more difficult to navigate through CSS and find out what classes are doing what exactly. Especially when a project grows over a long period of time and different people write CSS differently (and throw a few !important's in to make sure they can meet a deadline).
Each to their own though.