--- title: How to Change Button Styling slug: how-to-change-button-styling docTags: createdAt: 2025-07-15T20:57:58.973Z --- ## Introduction Buttons play a critical role in guiding visitors through your website and encouraging actions like renting a unit, contacting your facility, or making a payment. With Storagely’s Website Editor, you can fully customize button styling—including colors, text, size, and shape—to match your brand and improve user engagement. This guide walks you through how to update button styles across different sections and devices to ensure consistency and clarity throughout your site. :::hint{type="warning"} ***NOTE: If updating styling of one button, you will need to manually update all button styling on all pages.*** ::: ### To style a button: - Click the button element. - Use the toolbar to make the following changes: ::Image[~~~~]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe1zVKj4n0ZoTyi39Lwb67lk-tDXBlmKmYmwo5WZ_gGodc7DKvqAxZPfdF9WlrOogRoRVw1vy-1oRr2ZGh2evStIgzT6uBKECZk_wpqXh_HHTRw8OfmLFMs41vIvPV19ImQETpC13EFwqG-MF--UAg?key=SJqjgkT2K-F-F71wGPZjBw" size="56" width="662" height="193" darkWidth="662" darkHeight="193" position="center" showCaption="false"} - **Text Color **defines the color of any written content of the button ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/C8HOkvSZ3IFZnG2nIWwbi_screenshot-2025-07-24-at-95119-am.png" size="50" width="332" height="345" darkWidth="332" darkHeight="345" position="center" showCaption="false"} - **Font and Font Size** - The font used in a button determines the style and personality of the text. Font size controls how large the button text appears. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/h-oE6k6Zh_7HxlP0NJ_Ns_screenshot-2025-07-24-at-94916-am.png" size="60" width="449" height="256" darkWidth="449" darkHeight="256" position="center" showCaption="false"} - **Border Radius** for rounded corners - controls how rounded the corners of a button (or any element) appear. - **Padding for internal spacing** - refers to the internal spacing inside an element—it’s the space between the element’s content (like button text) and its border. For example, in a button, padding controls how much space surrounds the text inside the button. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/-4nbVjh9XSE15fw5pOa1c_screenshot-2025-07-24-at-94622-am.png" size="30" width="284" height="320" darkWidth="284" darkHeight="320" position="center" showCaption="false"} - **Icon placement **refers to the position of an icon in a block. By adjusting this setting, you can move the icon to the left, right, or center of the block. You can also move the button without needing to recreate the button entirely. This helps you fine-tune the layout for a cleaner and more balanced design. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/uM_iuItrj_HbYKw-frJv8_screenshot-2025-07-24-at-13155-pm.png" size="56" width="416" height="80" darkWidth="416" darkHeight="80" position="center" showCaption="false"} [Review the changes made in all 3 device types](https://docs.storagely.io/storagely-product/how-to-make-changes-on-desktop-tablet-and-mobile) (**desktop, tablet, mobile**) to ensure they look correct. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/hh2OkLSjHiC-BmyZwVS_p_screenshot-2025-06-26-at-30210-pm.png" size="28" width="355" height="818" position="flex-start" darkWidth="355" darkHeight="818" showCaption="false"} - To save the **update**, select “**Update**” in the bottom right corner of the window. Then close the tab. ### 🎥 Watch Tutorial Video :::Iframe{iframeHeight="0" code=""} ::: ### Button Styling Best Practices ✅ **Keep button text short and action-oriented: **Use clear, concise phrases like **“Reserve Now”**, **“Pay Online”**, or **“Contact Us”** to prompt user interaction. Avoid vague labels like “Click Here.” ✅ **Choose high-contrast colors for visibility: **Ensure your button color stands out from the background. Use your brand’s primary color for action buttons, and test for readability on light and dark backgrounds. ✅ **Test on all devices: **Always preview button alignment, text wrapping, and size in **Desktop, Tablet, and Mobile **views to ensure a polished look across screen types. *As always, if you have any questions during this process, our Customer Success Team is here to help. The best way to reach us is by submitting a support ticket.* **[Submit a Ticket](https://d1s7s.share.hsforms.com/297GkKIsiTSmDgSKUYT9s2g)**