Step 1: Launch Bubble.io and Open Your Project   - Navigate to the [Bubble.io](https://bubble.io) website. - Log in with your credentials. - Open the project where you'd like to design a button with a gradient background.   Step 2: Add a Button Element to Your Page   - On the left sidebar, click on the "Design" tab to enter the design mode. - From the Elements section, drag and drop a "Button" element onto your page.   Step 3: Configure the Button Styles   - Select the button on your canvas to bring up its properties in the right sidebar. - Under the "Primary" tab, click on the "Edit Style" button next to the style name. This will open the Style Editor.   Step 4: Access the Background Style Settings   - In the Style Editor, look for the "Background style" section. - Choose "Gradient" from the available options to enable gradient configuration for the button.   Step 5: Customize the Gradient Colors   - You'll see options to select two colors for your gradient. These are typically labeled as "Color 1" and "Color 2". - Click on each color selector box to open the color picker and choose your desired colors. - The preview section will automatically update to show the gradient effect based on your color selections.   Step 6: Adjust the Gradient Direction   - Below the color selectors, you will find options to adjust the direction of the gradient (e.g., vertical, horizontal, diagonal). - Choose the direction that best suits your design.   Step 7: Apply the Styles and Save   - After customizing the gradient, click on the "Save" button to apply the changes. - Close the Style Editor.   Step 8: Preview and Publish   - Go back to your main page to see the button with its new gradient background. - Use the "Preview" button to see how it looks in your application. - If satisfied with the design, click on "Deploy" to publish the changes.