Ask what happens after activation
A link takes the reader to a destination, including another route, a fragment or a downloadable resource. A button performs an action such as filtering cards, opening a menu or generating a result. Choose the element from that behavior first. The visual design can make either element look like a filled rectangle if that suits the interface.
Use real destinations for navigation
A project card that opens a case study should contain an anchor with a meaningful href. That supports opening in another tab, copying the address and normal browser navigation. An onClick handler on a div can imitate a basic visit but misses those established behaviors unless you recreate more of the browser’s interaction model.
Give buttons explicit form behavior
Inside a form, a button may submit by default. A secondary action such as Clear draft or Preview snippet should use type="button" if it must not submit. The actual submission control can use type="submit". This small distinction prevents accidental sends or validation attempts when a user only intended to adjust the interface.
Preserve useful accessible names
Use labels that explain the destination or action: Download résumé, View project, Generate password. An icon can accompany the label without replacing its meaning. If a control must be icon-only, provide a clear accessible name and a visible focus treatment. Generic repeated labels become ambiguous when presented outside their surrounding visual card.
Avoid nested interactive controls
Do not place a button inside a link that already makes the whole card clickable. Competing interactive descendants create confusing activation and keyboard behavior. Choose one primary card link, then put any separate action beside it in a clear structure. The reader should be able to tell which control will respond before clicking.
Test the browser features you expect
Open a project link in a new tab, copy its destination, activate an action with Space and submit a form with the keyboard. Check that disabled actions are really disabled and that a download serves a real file. Correct semantics are useful because they align the implementation with behavior people already know, across more than one input method.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.