How do I make the cards seem like they're clickable? I don't want CTA buttons below the cards.
2 Replies
there is no easy way to get around a button, because that is what the human mind is looking for. Any other solution will not be nearly as effective. For instance, you could give them a hover animation so they move when people scroll over them. That would work fine on desktop, but probably not on mobile. And, it still would only work if they notice the animation
My suggestion would be to extend the cards a bit more, and put a 'button outline' design element inside the card. As long as it tricks the eye into thinking the area is clickable, it doesn't even need text inside it.
and it will add a bit more flavor to these cards, which are otherwise, just a wall of text
add changes to
.card:hover like cursor type, that's the most obvious clue that something is "interactive"; doesn't work for mobile tho.
If there's an regular link inside, have the same or similar styles for .card:focus-inside (tabbing inside, keyboard navigation).
Try tabindex="0" on the card container so it can get focus (:focus-visibe)
A .card:hover :any-link can highlight the link inside the card and give additional hint to users if your links are not styled to look like obvious links.
Visually add box-shadow, outline, scale, subtle background-color shifts if people interact with the cards.