I'm currently adding a notice to our application flow that is disclosed by user action. The idea is that this notice is specific to certain situations in our flow, and not applicable in any case (that's why its shown on-click).
Currently I'm using a
<button> element for that, which is styled as a link: no borders, background-color and underlined text. This is consistent with the rest of the application (which was build by my predecessor). A sample of how this looks can be seen in my Codepen here.
But I'm wondering if this is at all correct? I'm actually using the visual styles of a hyperlink for an element with the action of a button. Even in our application, hyperlinks are used (for instance to link to a PDF document that is opened in a new tab), so this can lead to potentially confusing ux.
On the other hand, as indicated by this question about checkbox label styling, you can make the argument that the element is clickable, which would support this form of styling.
Is this a correct way to go, or is it documented to be a confusing ux element?