How do I style the "Show More" button in the Infinite Hits widget?

I’m trying to make the “Show More” button look and act like a button, like on: https://community.algolia.com/instantsearch.js/v2/dev-novel/?selectedStory=InfiniteHits.default

When using the widget as it is by default, the show “more text” is just a plain text, and that works as it should, but no matter what style I give to it, like if I’m assigning a class with:

border: 1px solid #000;
padding: 10px;
color: #ff0000;

then only the actual text is clickable and not the padded area around it, and the text color still remains black, although I changed it to red.

It’s quite confusing because then if someone clicks the button, but doesn’t click EXACTLY on the text inside the button, no more results will be loaded, and I can’t seem to change some properties, like text-color just by adding a class the button inside the widget.

However, on the example on the link I submitted above, the button works as it should and you can click anywhere on it to load more results.

I’m using Foundation 6 and I’m not sure if this can in some way be part of this behaviour?