In this guide, we’ll show you how to add a free “Parallelogram Button widget” to your Elementor website. The Parallelogram Button widget helps you create eye-catching call-to-action buttons with a unique slanted design. Perfect for adding a modern, creative touch to your site, this widget gives your buttons a standout appearance that draws attention and boosts user interaction. With customizable options for color, size, and text, the Parallelogram Button widget lets you easily craft stylish buttons that enhance your Elementor design.
Let’s explore the customization options available in the free “Parallelogram Button widget” for Elementor below.
Add a Free Parallelogram Button to Elementor
Go to Unlimited Elements and click "Widgets".
Search for “Parallelogram Button widget" in the widget library.
Hover over the widget and click Install.
Add a Free Parallelogram Button Widget to an Elementor Page
Click "Add Element" in Elementor
Search for “Parallelogram Button" in the widget panel.
Drag and drop the “Parallelogram Button” into the container.
Elementor Parallelogram Button Widget General Settings
Button Text
Enter the text that will be displayed on the button.
Link
Set the URL or destination that the button will navigate to when clicked.
Alignment
Control the horizontal alignment of the button within its container.
Center
Left
Right
Inherit
Skew
Adjust the angle to create a parallelogram-shaped button.
Show Icon
Toggle to enable or disable the display of an icon on the button.
Hover Transition Duration (ms)
Set the duration (in milliseconds) of the hover animation effect.
aria-label
Provide a descriptive label for screen readers to improve accessibility and explain the button’s purpose.
Elementor Parallelogram Button Widget Style Settings
Button Typography
Customize the font, size, weight, and other stylistic properties of the button text.
Button Padding
Adjust the internal spacing between the button’s content and its edges. Padding can be set individually for Top, Right, Bottom, and Left.
Border Radius
Control the curvature of the button’s corners. Radius values can be set for each corner: Top, Right, Bottom, and Left.
Button Background Color
Set the background color of the button in its normal state.
Button Text Color
Define the text color of the button in its normal state.
Text Shadow
Add and customize shadow effects applied to the button's text.
Box Shadow
Add and customize shadow effects applied to the button’s container.
Hover (Tab)
Configure the button’s appearance when hovered (details not shown in the image).
Border Type
Select the style of the button’s border:
None
Solid
Double
Dotted
Dashed
Groove
Parallelogram Button Widget Design Examples For Elementor
Here are some live use cases for the Parallelogram Button widget.
Unlimited Charts with Parallelogram Button widget.
Rhombus Grid with Parallelogram Button widget.
Thank you for using the Parallelogram Button widget for Elementor! This free widget lets you create standout call-to-action buttons with a unique slanted design. With customizable colors, sizes, and text, it adds a modern, creative touch to your site. Need help? Reach out anytime or explore our demo for inspiration.
