Creating Fancy Link Effects in Breakdance
This tutorial guides you through the process of creating fancy link effects using the built-in functionality of Breakdance.
Adding a Button
Start by adding a button to your page. You will initially see the default button style.
Customizing Button Style
Choosing Text Style
Under Design > Button > Style, select ‘Text’ for style. By default, this will be a plain text link.
Adding Fancy Underlines
Click the edit icon for the ‘Text’ styles, below the Style control. There, you’ll find the ‘Fancy Underline’ control. There are a number of styles available:
- Style 1: Directional slide-in/out effect on hover.
- Style 2: Double underline with opposite side animations on hover.
- Style 3: Underline originates on left and right, animates to meet in the middle, and the link text rises on hover.
- Style 4: Two underlines, one narrower than the other, animate upward and into view on hover.
- Style 5: Lines sandwich text link on hover, one coming from the top and one from the bottom.
- Style 6: Basic underline.
- Style 7: Basic underline that animates in on hover.
- Style 8: Thick underline that divides, one line moving up over the text on hover.
Adding Arrows to Links
From within the ‘Text’ button styles, click the ‘Arrow’ control’s edit icon to add an arrow and adjust its styling.
- Arrow: Choose the type of arrow used for the button.
- Space Before: Adjust the space after the text and before the arrow.
- Hover Transform: Determine the movement of the arrow on hover.
- Arrow Size: Set the size of the arrow.
Reviewing the Effect
After saving the changes, review the effect on the frontend to see the fancy link effect without the Breakdance UI.
Conclusiona
The tutorial demonstrates how to easily create sophisticated link effects in Breakdance with just a few clicks.
