# Creating a 3 state button group with dynamic background images and option sets

**URL:** <https://forum.bubble.io/t/creating-a-3-state-button-group-with-dynamic-background-images-and-option-sets/81398>\
**Category:** Need help\
**Created:** [March 9, 2020, 5:23pm UTC](https://forum.bubble.io/t/creating-a-3-state-button-group-with-dynamic-background-images-and-option-sets/81398 "2020-03-09T17:23:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![clint.ivy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/clint.ivy/32/55639_2.png) [@clint.ivy](https://forum.bubble.io/u/clint.ivy)\
**Post date:** [March 9, 2020, 5:23pm UTC](https://forum.bubble.io/t/creating-a-3-state-button-group-with-dynamic-background-images-and-option-sets/81398/1 "2020-03-09T17:23:53Z")

</div>

Hi!  
So I have a button group - with values of 1-5 (setting a priority for a thing) and it’s defined by an option set which includes an image/icon, a display (text), and id (number) for each value in the set. Easy enough to assign a default, dynamic background to each button in the group. And I can use a custom state (or built in hover) to dynamically set styling. What I can’t figure out how to do is pull a dynamic background image for each of the buttons that relates to the initial state.

The states are:

- Off/Not Selected
- Hover
- Selected

The option sets I have (in this example) are:  
Thing Priority  
Thing Priority - Hover  
Thing Priority - Selected

Thing Priority - Hover and - Selected have a relationship field that keys them to Thing Priority.

---

<div class="post-metadata">

**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\
**Post date:** [March 9, 2020, 6:25pm UTC](https://forum.bubble.io/t/creating-a-3-state-button-group-with-dynamic-background-images-and-option-sets/81398/2 "2020-03-09T18:25:35Z")

</div>

I’m not sure but first thought is this

![Screen Shot 2020-03-10 at 1.40.55 AM](https://us1.discourse-cdn.com/bubble/original/3X/d/e/de57e3611e3e327c1291579df2893182d66cc933.png)

![Screen Shot 2020-03-10 at 1.42.06 AM](https://us1.discourse-cdn.com/bubble/original/3X/3/1/314a11f09fb09c4d487ff8213182da7d946e7acd.png)

---

<div class="post-metadata">

**Author:** ![clint.ivy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/clint.ivy/32/55639_2.png) [@clint.ivy](https://forum.bubble.io/u/clint.ivy)\
**Post date:** [March 9, 2020, 6:36pm UTC](https://forum.bubble.io/t/creating-a-3-state-button-group-with-dynamic-background-images-and-option-sets/81398/3 "2020-03-09T18:36:10Z")

</div>

Hey, yeah … thanks! I think I’m on to solution where I store the icons as a list of images in a single option set instead of having multiple option sets. Will post back when I’ve got it worked out.

---

<div class="post-metadata">

**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\
**Post date:** [March 9, 2020, 6:41pm UTC](https://forum.bubble.io/t/creating-a-3-state-button-group-with-dynamic-background-images-and-option-sets/81398/4 "2020-03-09T18:41:39Z")

</div>

You should have one option set which is a list of options and each option in the list will have a single image

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [May 18, 2020, 5:23pm UTC](https://forum.bubble.io/t/creating-a-3-state-button-group-with-dynamic-background-images-and-option-sets/81398/5 "2020-05-18T17:23:56Z")

</div>

Closed on May 18, 2020, 5:23pm UTC

This topic was automatically closed after 70 days. New replies are no longer allowed.