This plugin extend Elementor by adding a new button widget, with awesome features and hover effects!

DotRex

Diego Pereira

PWR Plugins

<p>This plugin extend Elementor by adding a new button widget, with awesome features and hover effects!</p>
<h3>Plugin Demo</h3>
<p><a href="https://pwrplugins.com/magic-buttons-for-elementor-addon-and-widget-plugin-demo/" rel="nofollow ugc">Click here to see the plugin demo</a></p>
<h3>Overview</h3>
<p>This plugin extend Elementor by adding a new button widget, with awesome features and hover effects!</p>
<p>You can impress your audience with new button effects, and thus increase your clicks and conversions!</p>
<h3>Features</h3>
<ul>
<li>A new “Magic Button” widget available with Elementor</li>
<li>15 exclusive hover effects and animations</li>
<li>Easy to customize, lot’s of options available</li>
<li>Compatible with Elementor (Magic Button Widget)</li>
<li>Compatible with any page builder (if you use the shortcode)</li>
<li>Compatible with Gutenberg (if you use the shortcode)</li>
</ul>
<h3>Installation Instructions / How to use</h3>
<ol>
<li>Upload <code>magic-buttons-for-elementor</code> folder to the <code>/wp-content/plugins/</code> directory</li>
<li>Activate the plugin through the ‘Plugins’ menu in WordPress</li>
<li>Edit a page with Elementor</li>
<li>Drag and drop the Magic Button widget to your page.</li>
<li>Customize it using the widget options and publish the page.</li>
<li>Done! Your magic button is ready! =)</li>
</ol>
<h4>How to display the filterable portfolio grid using a shortcode</h4>
<p>The Magic Buttob widget will be available in Elementor items. Just drag it to your website and select the customization options 🙂</p>
<p>You can also use dthe shortcode to display the portfolio grid on a page/post, or using Gutenberg and other page builders:</p>
<p>[magic-button]<br />
[magic-button link=”‘.$linkurl.'” target=”‘.$target.'” nofollow=”‘.$nofollow.'” align=”‘.$align.'” style=”‘.$style.'” text=”‘.$text.'” icon=”‘.$iconvalue.'” icon_position=”‘.$icon_align.'” size=”‘.$size.'”]</p>
<p>You can customize it using these options:</p>
<ul>
<li><strong>link:</strong> Set the link of the button (eg: link=”http://wordpress.org”).</li>
<li><strong>target</strong>: You can use it to open the link in a new window. Options: true/false.(eg: target=”true”).</li>
<li><strong>nofollow</strong>: Use it to set the link as “nofollow”. Options: true/false (eg: nofollow=”true”).</li>
<li><strong>align</strong>: The aligment of the button. Options: center/left/right. (eg: align=”center”).</li>
<li><strong>style</strong>: The hover effect of the button. Options: see https://pwrplugins.com/magic-buttons-for-elementor-addon-and-widget-plugin-demo/. (eg: style=”nina”).</li>
<li><strong>size</strong>: Size of the button. Options: sm/md/lg (eg: size=”lg”).</li>
</ul>
<p>Please note that the shortcode option is very limited for now. You may need to customize colors and fonts using CSS.<br />
With Elementor, you can customize everything using the widget options.</p>
<h3>Reference</h3>
<p>The hover effects are inspired on this awesome article from Tympanus: https://tympanus.net/codrops/2015/02/26/inspiration-button-styles-effects/</p>


Alternatives to Magic Buttons for Elementor

Top alternatives