Search

How to Rotate the Icon in Elementor Button Widget

Rotating icons can add a dynamic and engaging element to your website design. It can also be used for symbolic representation; in some cases, rotating the icon can convey a symbolic meaning or reinforce the button’s message. For example, a rotating arrow icon can imply movement, progress, or a change of direction, depending on the context.

By default, in the Elementor Button widget, Elementor doesn’t allow us to rotate just the icon. This means, by default, rotating the icon will impact a whole button element. This tutorial will walk you through the step-by-step process of rotating icons individually in the Elementor Button widget.

Steps to Rotate the Icon in Elementor Button Widget

Step 1: Add or Edit the Existing Button Widget

Go to your Elementor editor; add a new Button widget or edit an existing one. Ensure that you add an icon to your button. You can add an icon by navigating to the Content tab -> Button -> Icon. We add an Arrow up icon from the icon library in this example.

Step 2: Add the Custom CSS

Once you add an icon to your Elementor Button widget, next we will add a simple CSS snippet to the widget to make the icon rotate individually.

On the widget settings panel, navigate to the Advanced tab -> Custom CSS. Next, copy the simple CSS snippet below and paste it into the Custom CSS input field.

selector .elementor-button-icon{
    transform: rotate(45deg);
}

The Code Explanation:

  • selector .elementor-button-icon
    • This selector identifies the element (button icon) to which the following CSS rule will be applied.
  • Property: transform
    • The transform property in CSS allows you to perform various transformations on an element (button icon), such as rotation, scaling, translation, and more. In this code, it’s being used to rotate the button icon.
  • Value: rotate(45deg)
    • This is the value assigned to the transform property. The rotate() function is a transformation function that specifies a rotation by a given angle. In this case, the angle is 45 deg.

Note: When this code is applied to an element with the class name “elementor-button-icon“, it will rotate that element by 45 degrees clockwise. You can check the complete list of Elementor widget selectors here.

That’s it. Now, the icon is individually rotated 45 degrees when the CSS snippet is put to your Button widget, as you can see in the image above. Modify the rotate value in the CSS snippet to acquire the proper rotation for your button icon. Lastly, if you wish to save or publish your project, remember to do so.

The Bottom Line

You are now proficient in rotating individual icons on the Elementor Button widget. You may create buttons with distinctive visual effects and improve your website design by rotating icons individually. To get the desired look, experiment with various rotation degrees. Enjoy creating personalized and interactive buttons with Elementor!

We hope this article is helpful, and if you have any questions or feedback, please don’t hesitate to contact us.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?