Make Cards more clickable

Question

I'm creating a flat-ish responsive website, which let's you vote 4 certain topics.

I'm displaying songs (but it could be whatever) in a flexbox grid system with 4 different colours. Each song is clickable and adds 1 vote to the counter. (NOTE: These 4 options are over displayed over the full screen, such as kahoot)

Here is a screenshot of what I've made at this point.

My problem is that these cards just don't feel clickable yet. I know, as the conceptor of the design, that it is clickable. However, I feel like it is not obvious - or not enough at least - for any random user.

Answer 1

You can do the following to make them seem more clickable:

1.Change the cursor to pointer on hover.

2.Provide raise(shadow effect) on hover.

OR

Assuming you are already doing the above:

1.Kill the padding so that when he hovers the cursor will change making it clickable. or

2.Put the button the image so that he knows that it's clickable[Not recommended] or

3.Make the title look like links by changing the color, to make them more clickable.

Answer 2

You don't nessecarily have to make the whole thing LOOK clickable for people to DISCOVER that it's clickable.

If in a large square, you have a smaller square that LOOKS clickable, people will notice hover/click effects once they interact with it. The on:hover effect for example can be attached to the larger area.

So adding a small "full album", "read more", "vote now" or whatever, can be enough, if it looks clickable.

Alternatively, you could use some form of animation. A "click me!" pop-up once every so often. A little jiggle. A zoom. A glow. Something to indicate that it can be interacted with.