Hi Elementors,
today I would like to show you a simple trick how you can create a “Slide Button” on Hover with Elementor Pro and The Plus Addons. With a few adjustments of custom css and in the styles you can create your individual Call to Actions Slide Buttons on Hover.
5 Steps how to create "Slide Buttons" with The Plus Addons and Custom CSS
1. Activate "The Plus Addons" & "Button" Widget
2. Add "TPButton" Widget
Drag & Drop the “TPButton” widget inside main section.
3. Choose "Style 2" and add CSS Class
Select Style 2 in the Content Tab and add a CSS class to the widget: mybutton
4. Add Custom CSS
Add the following code to your custom CSS in the advanced tab:
.mybutton i{
padding:0px !important;
width:50px !important;
height:50px !important;
color: white !important;
}
.mybutton .pt_plus_button.button-style-2 .button-link-wrap:hover .btn-icon {
transform: rotate(15deg);
}
5. Your Final Styling
Important: Set the text color to transparent in NORMAL state (1)
The remaining settings can be found in the pictures and by trial and error 😉 or just download the .json-file below.
Final Words & .JSON-File Download
So easily you can create a Slide Button on hover with the Pro Version of Elementor and The Plus Addons for Elementor. A little trick with great effect, which your customers will love using Elementor. You can find more cool widgets for Elementor in the Full Widget Table. HAVE FUN and please leave a comment!
