Need to create button with effect on hover with Elementor ?
If so, take a seat in this magnificent bus, because what we will achieve today is in the following video:
Let's create a page then modify it with Elementor, then select a 2-column structure. In the panel let's modify the newly created section by selecting Min Height on the field Height and immediately Min Height let's click on VH then set the cursor to 100.
In the tab Style let's change the background color to # 070e39.
In the first column, let's drop a Button widget, modify its text by typing View Details and let's align it to the right
In the tab Style let's modify it typography by changing the size on 15, transformation to on Majuscule et letter spacing on 1.1
In the tab Advanced, modify all marges on 20 and in the section Custom CSS, let's paste the following code that adds a gradient to the button:
selector {
–Btn-width: 180px;
–Btn-height: 50px;
–Btn-background: # 0e1538;
–Left-gradient: # F803F8;
–Right-gradient: # 03F2FD;
}
selector a {
position: relative;
width: var (–btn-width);
height: var (–btn-height);
}
selector a: before,
selector a: after {
happy: ";
position: absolute;
inset: 0;
transition: 0.5s;
}
selector a: nth-child (1): before,
selector a: nth-child (1): after {
background: linear-gradient (45deg, var (–left-gradient), var (–btn-background), var (–btn-background), var (–right-gradient));
}
selector a: hover: before {
inset:-3px;
}
selector a: hover: after {
inset:-3px;
filter: blur (10px);
}
selector a span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var (–btn-background);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
Now if you hover over the button you will discover magnificent effects.
To add a shiny glass effect on the button let's also paste the following code:
/ * Shiny Glass Effect * /
selector a span :: before {
happy: ";
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba (255,255,255,0.075);
transform: skew (160deg);
}
You observe a new effect which brings more light to the button.
Read also: How to create a team member section with Elementor
Now let's copy this button and paste it in the second column. Let's change the button alignment to left and change the text to See more.
Now you just have to publish your work or preview it.
Here are 2 beautiful buttons created.
Get Elementor Pro Now!
Conclusion
So ! That's it for this tutorial that shows you how to create a button with hover effect with the page builder Elementor. If you have any concerns about how to get there let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
