Button styling on markdown block

Site URL: https://fox-chihuahua-df3j.squarespace.com/projects/tumblrmobile

Hi,  i'm trying to make a clickable expandable piece of text (like an accordion but not a +/- menu, more like a button that shows/hides text)

I've used a markdown block to get the text show/hide feature, as shown:

(hidden)

(on click)

However, I'd like the pink text to look more like (and act like) a button instead. 

Like this, where it also reacts on hover.

Perhaps a markdown block isn't the best way to create a show/hide feature with a button, so if anyone knows how to make a button that shows/hides text that'd be really useful, thank you!

Add to Design > Custom CSS

.markdown-block details summary {
    background-color: #cf347f;
    color: white !important;
    border-radius: 20px;
    padding: 10px;
}