Wix Editor: Customizing the Design of Your Buttons
Create beautiful, eye-catching buttons that match your site and attract your visitors to interact. Click the Design icon  on your button to start customizing.In this article, learn more about: 
Designing the button Design glossaryNote:The options for button states differ depending on the type of button selected.Designing your buttonThere are a variety of customization options available. Depending on the button type, you can adjust the background, text, and icon. Choose the colors, fills, corners, shadows and more.Customize each button state individually to create eye-catching effects as visitors navigate your site. Use vibrant, distinct colors for the default, hover, and active states of each button to enhance engagement and make each one stand out.What's the difference between the button states? 
Regular: The button’s default appearance before visitors interact with it. Hover: The button's appearance when visitors hover over it with their cursor. Clicked / Focus: The button's appearance after visitors click it. Error: Indicates an issue with the button's function (e.g. file upload failure).Note:The customization options available depend on what you choose to display on your button (text, icon or both).To design your button:
Go to your editor. Click the button type you want to customize from the options below:Customize a Text & Icon button
Click the button you want to customize. Click Design  icon. Choose what you want to do:
    
Select another button design from the available options. Click Customize Design to adjust the following:
        
Background Fills: Choose a color, gradient or image for your button's background.  Text: Adjust the font, formatting and spacing of your button text. You can also click Shadows to add shadow to the text. Borders: Choose a color / gradient for your borders and set the thickness in px. You can apply the same design to all sides or click the Unlock icon  to customize them separately. Corners: Make your corners more round or square by changing the radius in px. You can set the same radius for all corners or click the Unlock icon  to customize them separately.  Shadows: Add inner / outer shadow, or multiple layers of shadow, while setting the color, angle, distance, size, etc.  Layout: Choose what to show on your button (text, icon or both) and how these should be arranged and aligned.  Icon: Adjust the color, size and angle of the icon appearing on your button.

    Customize an Icon button
Click the button you want to customize. Click Design  icon. Choose what you want to do:
    
Select another button design from the available options. Click Customize Design to adjust the following:
        
Background Fills: Choose a color, gradient or image for your button's background.  Text: Adjust the font, formatting and spacing of your button text. You can also click Shadows to add shadow to the text. Borders: Choose a color / gradient for your borders and set the thickness in px. You can apply the same design to all sides or click the Unlock icon  to customize them separately. Corners: Make your corners more round or square by changing the radius in px. You can set the same radius for all corners or click the Unlock icon  to customize them separately.  Shadows: Add inner / outer shadow, or multiple layers of shadow, while setting the color, angle, distance, size, etc.  Layout: Choose what to show on your button (text, icon or both) and how these should be arranged and aligned.  Icon: Adjust the color, size and angle of the icon appearing on your button.

    Learn more about customizing other types of buttons:
Upload buttons Document buttons Pay buttonsDesign glossaryButton design optionsOptionExplanationHow to useBackground FillsAdd different fills such as colors, images, patterns and gradients to create stunning and colorful effects on your button. 
Click the color box for each layer and choose the fill type, then drag the slider to change the opacity of the fill layer. Reorder the fill layers by dragging them up and down the list. BordersCustomize the button's border to make it stand out. Customize all sides of the button together, or each side separately, by clicking the Lock and Unlock icons. 
Click the Width field and enter the pixel width, or adjust the slider. Click the Style drop-down and select the border style. Click the Fill color box to select the border color, then use the slider to adjust opacity. CornersChange the corners of your button to make them more rounded or square. Change the size of all the corners together, or customize each corner separately, by clicking the Lock and Unlock icons. Click the pixel field on a corner and enter the number of pixels you want to apply to it.ShadowsAdd layers of shadows to your button, and customize the color, size and more.
Click the color box for each shadow layer and customize the color, type, angle, size, distance, and blur. Then, drag the slider to change the opacity of the shadow. Reorder the shadow layers by dragging them up and down the list. If using an Upload button:
Click the toggle to enable shadows. Use the sliders to edit the angle, distance, size, and blur. Then, use the slider and color box to edit the opacity and color.LayoutChange the layout of your button.
Click the Choose what to show drop-down and choose if you want to display the text, icon or both. Select the alignment, position and spacing of the text and/or icon (if relevant). Set the padding around the text and/or icon.Text formatting optionsOptionExplanationHow to useShow TextShow or hide text on your button.Click the toggle to show or hide text on your button.ThemeSelect the theme for your button text.Select a text theme from the drop-down menu.FontsChoose the font for your button text.Click the drop-down menu and select a font.Font SizeChange the size of the text on your button.Drag the slider to increase or decrease the font size, or enter a value.Text FormattingApply formatting to your text. 
Format your text using the options: bold, italics, underline, strikethrough, colors, capitalization and text direction and alignment.Character SpacingChange the spacing between the text characters.Drag the slider to increase or decrease spacing, or enter a value.ShadowsCreate shadows for your text. You can have more than one shadow.Click Add a shadow to add a new one. Click the Customize Shadow icon to design it.Icon design optionsOptionExplanationHow to useShow iconShow or hide an icon on your button.Click the toggle to show or hide the icon on your button.SizeChange the size of your icon.Drag the slider to increase or decrease the size of your icon, or enter a value.ColorChange the color of the icon.Click the color box and select a color.RotationAdjust the rotation of the icon.Drag the handle to customize the rotation of the icon, or enter the degrees in the text box.