Best practice to create a custom shaped button

[thekeybeats2]

Here’s how I designed it:

1. Start with a button with a 1:1 aspect ratio or same values for both height and width
   

   

2. 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.
   

   

3. 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.
   

   

4. 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.
   

   

5. 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.
   

   

6. 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

7. 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:

8. 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!