Elementor COOL Button Hover Effect | WordPress Elementor Pro Tutorial

Get Ready Elementor Templates

Request A Quote

Jim Fahad

Hi, please provide your request details below and I’ll get back to you.

Your name^*

Email address^*

Describe the service you're looking to purchase - please be as detailed as possible: 0 / 5000

Define in Detail

Include all the necessary details needed to complete your request.

For example:

If you are looking for a business website, you can specify your business type, other reference websites you like, preferred color, etc.

Once you place your order, when would you like your service delivered?

24 Hours

3 Days

7 Days

Set a Delivery Time

This is the amount of time you want it to be completed. Please note that a request for faster delivery may impact the price.

What is your budget for this service?^*

$

Set Your Budget

Enter an amount you are willing to spend for this service.

Your request sent successfully. We'll review and send you a conformation mail shortly. Please check your inbox. Thank you!

Something went wrong. Your request is not submitted.

Your request is submitted but attached file is not uploded.

Recent Projects

Jay Cooper 5.00

United States

Completed

I have a local store in California US. But, I want an online channel to grow my business further away. So, all I need to make an entire website from A-Z. Let's discuss more on Skype?

Budget: $750

Client feedback:

Fahad is a talented web developer with a fantastic dimension of creativity and proactivity. He made the whole process very easy for me with excellent communication. I enjoyed the process and timely delivery. Thank you so much.

Angela July 5.00

United Kingdom

Completed

For my personal portfolio, I've built a website using Divi. When I try to work on it several pages are broken. I need your personal help. And let me confess another thing, I've tried some freelancers to do this task from Fiverr and Upwork and I'm completely disappointed with their result. Most of them pretend like they know it all but the result is zero. Then one of my good friends Max(you know him) referred me to your website and said you're the real guy! Please, I need it to be done. I'm flexible with the budget. Please! Are you available this week? No rush though!

Show MoreShow Less

Budget: $450

Client feedback:

My goodness! Fahad!!! You're a magician. Oh my gosshh! I can't thank you more, Also thanks to Max for referring you! I'm super happy!

Elementor COOL Button Hover Effect | WordPress Elementor Pro Tutorial

IMPORTANT LINKS

Gradient Button Effect

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 {
	content: '';
	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;
}

Button Shine Effect

/*Glass Shine Effect*/
selector a span::before {
	content: '';
	position: absolute;
	top: 0;
	left: -50%;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.075);
	transform: skew(160deg);
}

Wanna join my secret winners’ gang?

I only share these secrets with the people in this group. Honestly, you can not find such tricks for FREE on the whole internet!

Money Making Blog Tricks
$100k by Freelancing Formula
Secret Resources
Rich Dad business tactics
And, of course about my upcoming videos and plans