Hey there!
I’m trying to create a “quarter of a doughnut” shape button. After reading a bit about it in the forum I understand it might not be so simple so just wanted to ask - What would be the best way to do so?
I found one solution which offers making the shape outside of bubble and then uploading it as an image, yet I think that would not make accurate button borders. right?
Basically I want the button to have all functionallity that regular bubble elements have
What would be the best way to do so?
Thanks!
In Bubble almost anything can be used as a “button”. You can add an image to your page and upload the image in this post to it and then access workflows from the “When an element is clicked” workflow.
This is how I would approach it if I needed to create a button like the one you show. I would go into Adobe Illustrator and create a variety of different “states” that I would use, that were all constrained into the same box. In this way, when the states change, the dimensions and anchor point of the box among all of the states remains the same and aligned.
Each state would be something like “Normal”, “Hovered”, “Pressed” etc.
I would import them in as an SVG format and then apply the usual conditions on the “Normal” state to alter which image is shown at which state. Should work well.
The best I could come up with was this. No plugins or images needed. Just 4 buttons.
Let me know if you need an explanation or if it’s not really the design you’re looking for.
Cheers!
2 Likes
That looks amazing! thanks!
I would love for you to show me. I need something very similar
Is it possible to save each one of the quarters as an individual element?
Thanks again,
Omer
Here’s how I designed it:
-
Start with a button with a 1:1 aspect ratio or same values for both height and width
-
Group that button in a column container with no paddings, DO NOT fit width to content. Call this new container “Button Container” so you don’t get confused at a very important step later.
-
STYLING: Remove the “edit me…” and give the button your desired color.
Let’s assume this button will be the top right one. So you’re going to want the top right border to be round. So define the button’s borders independently and give it a top-right radius of 500 (or double the height of your button. I choose 500 to not do any math lol).
You also want the most inner side of the button to have a rounded border too. For this specific button, this should be the bottom left side. Give that your desired border radius. I’m giving it a border of 250px
For all sides, give it a border style of solid, 0px, black. We will need this when we set up the conditionals on hover.
-
TRANSITIONS: You’re gonna need some transitions so let’s define them now.
-You want the button to grow in size, so give it height and width transition. Make sure it’s height and width, not min height or min width.
-You want the margins to transition slowly so it floats away from the other buttons. For this particular button, that would be the bottom and left margins, but give all the margins a transition since the other buttons will need different margin sides changed. This way, we’ll be able to ignore this step when we copy paste them.
-Give a background style transition for color fade out.
-
Now for the conditionals on hover
-When you hover, you want the borders to appear, so give all of them a width you want. I’m choosing 7
-The button needs to become bigger, so give it a height and width.
-The button needs to float away, so give it a bottom and left margin of 15 for example. You need to make sure you’re using the correct margins. They are different for each button.
-Change the color of the background too. In this case, no color so 0% opacity.
-
Copy and pasting
-Copy paste the “button container” that holds the button, (not the button itself. VERY IMPORTANT) to form the top side of the circle.
-Group these 2 button containers into a row container.
-Change the vertical alignments of the button containers to bottom (IMPORTANT) (forgot to include in the gif).
*New button
-Change the border radiuses of the new button.
-Change the conditionals to use the correct margin sides on hover.
-Change its horizontal alignment to the right (IMPORTANT). So the left button has an alignment to the right, and the right button has an alignment to the left. This makes sure they stay in the middle.
To be able to select both Button containers I made its height a little bigger. You probably already know this but to select multiple elements, hold shift and click them. Right click to open the menu to group them. See gif
- Give the new container a fixed height that is NOT smaller than the conditional height of the buttons + their margins. So fixed height should be at least 170px + 15px = 185px.
Set fixed width that is the maximum width the 2 buttons can become when hovered, which is 185px + 185px = 370px.
The new container is colored green:
- Now just copy and paste this new container, group them into a column container, and fix the border radiuses and conditionals of the buttons again to form a full circle. Make sure the new button containers are aligned to top now.
See gif: (remember to change conditional margins)
Change the colors to whatever you want and you should be done. You can give each of the button a workflow too!
This is the elements Tree:
Hope this helped you buddy,
Cheers! 
1 Like
OMG I love it!
you rock.
Thanks for the highly detailed explanation! this is great!
