BLACK WEEK
20% - 70% OFF

SALE

Elementor  Crocoblock  The Plus  Premium Addons  ElementsKit  Ultimate Addons  Element Pack  Essential Addons  Unlimited Elements  PowerPack  HT Mega 

Slide Button on Hover

Elementor Slide Button on Hover

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

To create this cool effect you need the plugins Elementor and The Plus Addons. Visit Demo Page of >>> Plus Buttons <<<.

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!

Your Comments

Explore Further Widgets & Extensions

Categories

BLACK WEEK ENDS IN ...

Days
Hours
Minutes
Seconds