How to Add Buttons to WordPress With Elementor

Hey guys this is Noah from Elementor today we’ll go over the button widget the buttons a very important element which is why we brought you many cool settings and effects for this widget as you can see on this page there are a few buttons each with its own unique style and effects now I’ll show you how to create them on your page to begin we’ll click on the edit with Elementor button to begin I’ll just search the widget in the search bar and drag it alright now that it’s in its place you will see the edit button area with the content style and Advanced tab in the content area you have full control over the button contents for example you have button type where you could choose a ready-made button by its color warning danger or defaults and you have the button text where you could insert the text of the button and you could insert its link and choose the option of opening the link in a new tab by clicking here and you have the button alignment as the left center right or justified and you have the size small large extra large extra extra large or medium and last but not least here you could choose the icon where we have over 400 different icons from the font awesome website once you choose an icon you could choose its position before or after the text and something very cool the icon spacing which actually sets the space between the text and the icon alright that was the button content area let’s move on to the styles in the style tab you have full rollover style options of the button and the button over in the button options you have the text color and the typography of the text as default or customize it where you have the size and font weights transform style line height and letter spacing which sets the space between the letters of the button and background color where you could choose the background color of the button and now you have border type which is very cool you could choose a solid border double dotted dashed and set its width let’s say as five once you have a border for your button you could choose its color let’s say I give it a little green and it’s opacity and you could choose the border radius now the border radius as default is set at about three pixels but you could choose for example 50 and make it a rounded button or just give it a 10 or 0 to make it squared and here’s something very cool the text padding where you could set the inner space between the text and the edges of the button let’s give all them ten all right those were the button style options we’ll move on now to the button hover options here you could choose for the button over its text color its background color border color and animation let’s begin let’s choose black for the text color for the background color we’ll choose white for the border color we’ll choose red and animation let’s give it a grow animation now let’s see how it looks all right those were the style options for the button and the button over now I’ll just quickly go over the other buttons that you could see on this page for example the squared as you can see in the button over we actually gave the background color and opacity of 0 which makes the opacity transparent like that which makes it very cool and here for example we gave it a rounded border of 50 which makes it a rounded button with an icon inside and here we have a very nice effect of a transparent button which has a hover with an opacity so you can see the background color has a light opacity which makes an interesting effect over the background here we have a custom size button where we actually played around with a border radius of the button so you could see the border radius on the right and left border we set 9 and on the rest zero and the text padding also 1760 each one a different size and here we have a 3d of back which is a regular button but with only one border on the bottom with a darker shade of red which gave it the 3d effects I hope you enjoy this video for more videos and tutorials subscribe our YouTube channel or visit us at Doc’s Elementor com

As found on Youtube

(Visited 4 times, 1 visits today)

You Might Be Interested In

Channels Have This Video