Style buttons to take on arrow shapes

Dash Python
1

hi all,
I’d like to have buttons in the shape of arrows that will flip backwards/forwards through pictures when clicked.
Can someone explain how to implement this?

I’ve been playing around with the html.Button feature. Specifically I added an arrow class to my CSS file (code for arrows taken from here) and changed the className attribute to read the arrow class, but all I’m getting is an empty box.

Thanks in advance.

Cheers

  • m
2

Hi M,

Might be a bit of a work around but you could have the image of the arrow you want in the static folder and have an image component as a child of the button component, something like this?

html.Button(id='your_button',
children=[html.Img(r'path/to/img')]),

Hope this helps!

3

There should be src= in html.Img(), for example:

html.Button(id='your_button', children=[html.Img(src='https://static.thenounproject.com/png/6402-84.png')]),
1 Like
4

@caiyij,
Missed that one, cheers!

5

Sorry, forgot to answer this.

Thanks for the replies.
Turned out that I had to adapt the code to my CSS template.

I assumed that really no CSS understanding was necessary for Dash, but I think if one wants to add particular styling some knowledge of CSS is really helpful.

Cheers
M