Article - Customizing Button Border & Shadow

You can customize the border of your button and customize the shadow settings.

Adding a border:

1. Click on the button to open the Button panel.

2. Select Style.

 

3. From the Style panel, select Border.

 

4. Select the button state you want to edit: Normal or Hover.

 

5. Use the color picker to select a border color.

6. Use the Width slider to set the border width. You can also enter the numeric value, in pixels, in the text field.

7. Use the Corners slider to edit the curvature of the corners. You can use this to create rounded corners. You can also enter the numeric value in the text field provided.

Changes are auto-saved and will apply automatically. 


Adding a shadow:

1. From the Style panel, select Shadow.

 

2. Select the button state you want to edit: Normal or Hover.

 

3. Use the color picker to select a shadow color.

4. Use the horizontal offset slider to edit the horizontal offset. You can also enter the numeric value in the text field provided. A positive value means the shadow is drawn to the right side of the button; a negative value means the shadow is drawn to the left side.

5. Use the Vertical offset slider to edit the vertical offset. You can also enter the numeric value in the text field provided. A positive value means the shadow is drawn below the button; a negative value means the shadow is drawn above.

6. Use the blur slider to edit the blur radius. You can also enter the numeric value in the text field provided. The blur radius defines how big and how much blurred the shadow is.  A larger value makes the shadow lighter, and a value of 0 makes the shadow’s edges sharp.

7. Use the spread slider to edit the spread distance. You can also enter the numeric value in the text field provided. The spread distance makes the shadow bigger (ie. expand) in all directions.

 

Changes are auto-saved and will apply automatically. 

Published: September 8 2015

Found in Categories