The Button FX widget offers a great way to create attention-grabbing transitions. When your custom button is clicked, a full page animated transition takes place before revealing a new page via redirect, or a full screen modal. If you're looking for a unique, dramatic, or colorful way to display important information on your site, this may be just the ticket. Take a look at our live preview to see all eleven transition styles in action.
Compatibility: Muse 2018.1
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Release Log
1.0: Initial Release
Setup
WIDGET PLACEMENT IN MUSE
Drop the Button FX widget onto your page.
This widget has 3 modes of operation. Depending on the mode (Modal or Button), the widget may be placed on canvas or off-canvas. More on this below...
WIDGET OPTIONS
Open the widget option panel.
Button Action: There are 3 options:
Redirect to URL (Button): This is the most commonly used mode. This mode utilizes a button on your site; either previously existing or newly created. When the button is clicked, the effects transition is seen just before the user is redirected to a new URL (on your site or elsewhere). The button should have a graphic style applied, which is entered in the Custom Redirect Button Graphic Style field below. For this mode, the widget should be placed off canvas, out of the way.
Redirect to URL (Block): This mode displays a block on your page containing title text and a button. When the button is clicked, the effects transition is seen just before the user is redirected to a new URL.
Open Modal: In this mode, the button opens a modal (essentially a pop-up). When using this mode, the widget will display a block on the page containing title text and a button. The widget container represents the size of the block, as well as the size of the modal. Size the widget container appropriately for the intended block and modal content.
Destination URL: This is the URL the button will link to in the Redirect to URL (Block) and Redirect to URL (Button) modes mentioned above.
Custom Redirect Graphic Style: This option is available when using the Redirect to URL (Button) mode. You may use an existing button or a newly created button. In either case, apply a graphic style to the button. Enter the graphic style name in this field. Place the button where you would like it to appear.
Block Background Color: This sets the color of the content block. This setting applies to the Open Modal and Redirect to URL (Block) modes only.
Transition Animation: This dropdown offers 11 different transition styles. These are the effects seen when the button is clicked and the user is redirected, or opens the modal. Note that for any effect to work, you must load the appropriate PNG Image Mask (see below).
PNG Image Mask: This option loads the PNG mask associated with the chosen Transition Animation. No transition will be seen unless a PNG Image Mask is loaded. All 11 PNG files are included with the widget, and can be found in their own folder within the widget .zip file. Each file is named to match the transition name. Simply load the appropriate PNG file. Example: If you've chosen the "Scrub" Transition Animation, load the Scrub PNG file.
The PNG files determine the colors seen in the transition animations. You can change the color by opening the PNG file in Photoshop, Illustrator, or similar.
BLOCK TITLE & BLOCK BUTTON STYLING SECTIONS These sections contain all of the styling options available for the block modes: Open Modal and Redirect to URL (Block) (if you are using the Redirect to URL (Button) mode, there is no need to update these settings).
When using block modes, the widget container represents the sizing of the content block and modal, as mentioned previously. The button is displayed in the center of the block. While full styling control is available for text, button, colors, etc., the block modes are more restrictive in terms of button placement, since the button will always be centered within the widget container. If using block modes, note that you may utilize full browser width if you would like the block to display full width.
All of the styling options in this section are labeled with their exact function, and will not be discussed individually here as they are self-explanatory.
MODAL STYLING Very similar to the Block Styling sections above, the modal styling section applies to the block modes: Open Modal and Redirect to URL (Block) (if you are using the Redirect to URL (Button) mode, there is no need to update these settings).
The modal size is determined by the size of the widget container. All text content seen in the modal will be entered in the text fields within the Modal Styling section. Note that if the text content exceeds the height of the modal, a scrollbar will be enabled, allowing the user to scroll to access content.
All of the styling options in this section are labeled with their exact function, and will not be discussed individually here as they are self-explanatory.