Suggested Improvement: Button Element - Image Background

Beta
#1

Hi Team

This has probably been brought up already, but just wanted to note it down in case.

Can you please consider adding the ability to choose an image for Button Background ‘Base’ & ‘Interaction’ setup. Currently, we can only select colours:

So in one example, I have to use the new Cards element with zero seconds of flip duration to act somewhat as a button that changes the image when hovered over. However, the hover interaction isn’t as ‘nice’ as the hover interaction of a Button - it’s a lot sharper rather than a slight fade.

Cheers,
Sam

1 Like
#2

Thanks Sam! That’s an interesting workaround using the Card. I can see how that’s not ideal. Similar to your other topic about secondary text, I think we’re pushing the boundaries of what the button element was meant to do. I don’t see us adding background images directly to the existing button. Curious to hear your thoughts on the other issue: https://theme.co/apex/forum/t/suggested-improvement-button-text-fields/62564

Meanwhile, you could use a bit of Element CSS to get closer to your desired result:

$el {
  background-image: url('http://example.com/path/to/image.jpg');
}

$el:hover {
  background-image: url('http://example.com/path/to/image-hover.jpg');
}
#3

Given there is Background image functionality across quite a few areas of Pro, I’d think it wouldn’t be out of the ordinary for Buttons to have this functionality as well.

Buttons don’t always necessarily need to be the small / basic / traditional looking ‘button’ - but will extended functionality can act as “clickable” feature elements - where imagery would often be utilised. Given they have the advanced ‘particle’ functionality included as well. Can make for a very nice looking feature / large-button element. Oh… and Buttons have Flex!

Definitely something to consider further, as I’m seeing some interest in this from others.

As noted in the other thread, I’d be much more keen to use the Button element in the current example (with image backgrounds/hover).

Cheers,
Sam

#4

We haven’t really gotten into the realm of interactive backgrounds. There are layered backgrounds for layout elements, but that’s about it. The closest alternative there is that Card. As it stands right now we probably won’t tack on background images to the button. Before we get to that I’d like to explore the possibilities of adding a link wrapper around Columns.

#5

Yep, understood if background images aren’t added to the current Button element. But yeah like we’ve discussed, the possibility of a new Element that allows from background imagery that acts similar to a button (flex, particles, shadowing, graphics/icons, advanced text entry etc.) could be a great addition.

Link wrappers around columns definitely sounds great in the meantime as well.

Cheers,
Sam

#6

Sounds good. The element CSS option takes a bit to setup, but it’s not a bad alternative either.