Magnetic Buttons

The Magnetic Buttons widget applies unique and powerful motion effects to buttons. As the user approaches a magnetic button, the button itself is pulled toward the cursor.

Calls to action are vital in a high performance site. Magnetic Buttons draw interest and encourage site visitors to engage with calls to action. Six individual button styles and extensive styling options offer a variety of magnetic effects and button warping. Use this widget to make the buttons on your site simply irresistible.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop, Tablet, Phone

Release Log

  • 1.0: Initial release

Setup in Muse

  • Place the widget on your site where you would like your button to appear. The widget itself is the button. So for every button you want to be a magnetic button, you will need to use a separate instance of the widget.
  • To change the size of the button itself, simply resize the widget container.
  • Open the widget option panel.
  • Button Style: you may choose from six different button styles. Button styles differ in the animation type and how the button interacts with the cursor. Also note that button styles 2 and 5 are intended for a round button.
  • When creating round buttons, size the widget container to be square (example: 120px width by 120px height).
  • Button URL: This section allows you to link the button. Note that you must use the proper URL for the page you are linking to. If your site is not yet published, you will need to know the proper published URL, or you may return to this field and update it if you do not yet know your domain.
  • Button Label: This is the text that appears on the button.
  • Button Target: You may choose that links are opened in the same tab or a new tab.

All button styling is done in the widget option panel (except for button size). Use the settings in the Common Button Styling section to style your button.

Button styles 3 and 5 have styling options that are specific to those styles. You may use these styling options in addition to the common button styling to style buttons when using styles 3 and 5.

There are extensive styling options in the styling sections. We will not cover each setting here, as every setting is labeled with its exact function.

Commonly Asked Questions

No commonly asked questions

Known Issues/Conflicts

No known issues or conflicts

Additional Info Links