How to Create a Unique Hover Button 01: A Step-by-Step Guide
Get started at https://maxiblocks.com/ - Tired of those page builders that tease you with basic features and make you pay for the rest? MaxiBlocks is here to break the cycle. Discover freedom with 1400 templates, 13K+ icons, 100 design styles. Join our community!
Creating buttons with hover effects can add a touch of interactivity and flair to your website. Today, we'll walk you through the steps to create a captivating hover button. Let's jump right in!
00:00 - Preview
Setting the Foundation:
00:10 - Adding Button Maxi
Button Block: Begin by inserting the Button Maxi block.
Text: Add your desired text to the button.
Typography Settings:
00:17 - Button settings
From the sidebar settings, activate the Typography toggle.
Set the font weight to 700.
Margin & Padding:
Toggle the margin and padding settings.
Adjust the top and bottom padding as desired.
Canvas Settings:
00:40 - Adding background layers
Activate the Canvas toggle.
Add a colour background layer.
Move this layer to 50% from the top.
Introduce a new colour background layer. This should also be moved 50% from the top but ensure the right value is set to 0.
01:13 - Custom CSS
Custom CSS:
For the first layer, head to the advanced settings and select custom CSS.
Here, add width: auto and aspect ratio: 1.
Replicate these settings for the second layer.
Circle Shape Mask:
01:30 - Making layers of circles
Transform both layers into circles using the circle shape mask.
Positioning:
01:40 - Positioning circles
Adjust the position of the circles using the translate settings.
01:50 - Setting default values
In the canvas settings, activate the toggle that says "set width to fit content".
Modify the height of the second layer to 300% and set the opacity to 0.
02:10 - Setting hover values
The Hover Magic:
For the first layer, on hover, set the height to 300% and opacity to 0.
Do the opposite for the second layer. This creates the illusion that the circle shifts from the left to the right of the button when hovered over.
02:30 - Final preview
Preview: It's always a good practice to preview your changes. Check out your button - it should look fantastic!
Conclusion:
There you have it - a unique hover button that stands out! Such interactive elements can significantly enhance the user experience on your website. Remember, while creativity is essential, ensure that the overall design aligns with the theme and purpose of your site.
Thanks for reading, and even more for watching if you've checked out our YouTube tutorial! Don't forget to like, share, and subscribe!
Important links:
Help desk - https://maxiblocks.com/go/help-desk
Pro library - https://maxiblocks.com/pro-library/
Demo library - https://maxiblocks.com/demo/
MaxiBlocks - https://maxiblocks.com/
Twitter - / maxiblocks
Discord community - https://maxiblocks.com/go/maxi-discord
Roadmap - https://maxiblocks.com/go/roadmap