Gradient buttons can add a modern and visually appealing touch to your WordPress website. While flat buttons are functional, gradients offer an opportunity to enhance your site’s design and potentially improve user engagement. This tutorial will demonstrate how to create these buttons.
The Setup
You’ll need a few tools and a page where you want to add the buttons. The process is straightforward, even if you’re new to WordPress or Elementor.
The Tools
- WordPress (self-hosted): The self-hosted version from wordpress.org.
- Page Builder Framework (Optional): A lightweight theme optimized for page builders.
- Elementor (Free): The free version of the Elementor page builder.
- Piotnet Addons Plugin (Standalone): This plugin provides the gradient button functionality. Note: This guide uses the *standalone* Piotnet Addons plugin, not PAFE.
The Page
You’ll need a page or post where you want to add the gradient buttons. Ensure that Elementor is activated on that page or post. If you are unsure how to do that, look for online tutorials.
The Plugin
Install the *standalone* Piotnet Addons plugin (Plugins > Add New > Upload Plugin). Upload the .zip file you received after purchase, install, and activate it.
After installing the plugin, you may need to visit the Piotnet Addons settings page in your WordPress dashboard. Look for an option to enable the “Gradient Button” feature and ensure it’s turned on.
Adding a Button Widget
Open the page or post in the Elementor editor. Search for the standard “Button” widget in the Elementor sidebar (under “Basic”).
Drag and drop the “Button” widget into the desired section of your page. This creates a standard, flat-color button, which we’ll now transform into a gradient button.
Adding a Linear Gradient
With the button widget selected, click on the “Style” tab in the left-hand sidebar. Scroll down until you find the “Piotnet Addons” or “Piotnet” section (the exact name may vary slightly).
Look for an option labeled “Gradient Button” (or similar) and enable it. This activates Piotnet’s gradient functionality for the button.
Changing the Angle
By default, the gradient will likely be a linear gradient from top to bottom (180 degrees). To change the angle, find the “Angle” setting within the Piotnet Gradient Button options.
You can click and drag the circular control or enter a specific degree value (e.g., 230 degrees for a diagonal gradient). Experiment with different angles to find what you like best.
Changing the Color
Piotnet’s gradient settings will show two color pickers. Click on the first color picker and choose your starting color.
You can use the color picker, enter a hex code (e.g., #FF5733), or select from your global colors (if you have them set up). Repeat this process for the second color picker to choose your ending color (e.g., #33FF57).
Changing the Location
The “Location” sliders control where each color starts and stops within the gradient. The default values are usually 0% and 100%, creating a smooth transition across the entire button.
To create a sharper transition, adjust both location sliders to the same value (e.g., 50%). This creates a hard line between the two colors.
Hover Effect
To make the button more interactive, add a hover effect. Click on the “Hover” tab within the Piotnet Gradient Button settings.
Choose new colors for the hover state. You can also adjust the angle and location for the hover gradient, creating a dynamic visual change when the user hovers their mouse over the button.
Adding a Radial Gradient
To create a radial gradient, add another “Button” widget to your page (or duplicate the existing one). Follow the same initial steps as above: go to the “Style” tab, find the Piotnet Gradient Button settings, and enable it.
Changing the Type
In the Piotnet Gradient Button settings, locate the “Type” option. Change it from “Linear” to “Radial.” This transforms the gradient from a straight line to a circular pattern.
Changing the Color
Select your desired colors for the radial gradient using the color pickers. The first color will typically be the center color, and the second color will be the outer color.
Changing the Position
With a radial gradient, you can control the position of the center point. Find the “Position” setting in the Piotnet Gradient Button options.
Choose from options like “Center Center” (the default), “Top Center,” “Bottom Center,” etc., to change where the gradient originates. Experiment to see the different effects.
Hover Effect (Radial)
Just like with the linear gradient, you can add a hover effect to the radial gradient. Click on the “Hover” tab and set new colors, type (radial), and position for the hover state.
Conclusion
Elementor’s built-in button widget doesn’t offer gradient styling, even in the Pro version. The Piotnet Addons plugin fills this gap, providing powerful and flexible gradient button capabilities.
By following these steps, you can create visually appealing and interactive buttons that enhance your website’s design. Remember to save your changes by clicking the “Update” or “Publish” button in Elementor.