Facebook-f X-twitter
EncodeByte
Need Help!
  • How-To
    How-ToShow More
    How To Redirect Old Website To New Domain Without Losing SEO | 301 Domain Redirect
    By
    Franchbabu
    How to Fix the “Windows Cannot Be Installed to This Disk” Error
    By
    EncodeMore
    How to Check Your Laptop’s Battery Health: A Step-by-Step Guide
    By
    EncodeMore
    How to Become a Freelancer in 2025: A Comprehensive Guide.
    By
    EncodeMore
    How to Activate Windows Legally and For Free (100% Working)
    By
    EncodeMore
  • Web Development & Coding
    Web Development & CodingShow More
    How to Become a Freelancer in 2025: A Comprehensive Guide.
    By
    EncodeMore
    Top In-Demand Freelancer Niches for 2025 – Fast Growth Ahead!
    By
    EncodeMore
    🚀 10 Reasons Why Hostinger Is the Best Web Hosting Platform for Speed, Security & Affordability
    By
    Franchbabu
    How to Add “Made with ❤️” to Your WordPress Footer (No Plugin Needed)
    By
    EncodeMore
    WordPress Redirect After Login: How to Set It Up
    By
    EncodeMore
  • Code Snippets & Scripts
    Code Snippets & ScriptsShow More
    How to Hide a Class in WordPress (Easy CSS & Admin Tips)
    By
    EncodeMore
  • Website Design & UX
    Website Design & UXShow More
    10 Web Design Mistakes That Are Killing Your User Experience (and How to Fix Them)
    By
    Franchbabu
  • Make Money Online
    Make Money OnlineShow More
    How to Become a Freelancer in 2025: A Comprehensive Guide.
    By
    EncodeMore
    Top In-Demand Freelancer Niches for 2025 – Fast Growth Ahead!
    By
    EncodeMore
    Website related skillsets that you shoud have
    By
    EncodeMore
    Top Sites Like Fiverr: The Best Fiverr Alternatives for Freelancers
    By
    Franchbabu
    Best Telegram Channels For Free Paid Courses
    By
    Franchbabu
  • 🤩 Trending:
  • How-To Guides
  • WordPress & Website Development
  • Web Development & Coding
  • Windows & Software Fixes
  • Tech Tips, Tools & Tutorials
  • Computer Tips & Tricks
Font ResizerAa
EncodeByteEncodeByte
Search
  • How-To
  • Web Development & Coding
  • Code Snippets & Scripts
  • Website Design & UX
  • Make Money Online
Follow US
Made by ThemeRuby using the Foxiz theme. Powered by WordPress
Front-End DevelopmentWordPress & Website Development

Elementor COOL Button Hover Effect | Gradient Button Effect

Last updated: August 1, 2025 9:35 am
By
Franchbabu
Share

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);
    }
TAGGED:Elementor
Share This Article
Facebook Whatsapp Whatsapp LinkedIn
Leave a Comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Popular Categories

Themes & Customization

1 Article

Troubleshooting & Fixes

1 Article

WordPress Tips & Tricks

6 Articles

WordPress Tutorials

5 Articles

Must Read

WordPress & Website DevelopmentHow-To Guides

How to Create a Private/Password Protected Post or Page in WordPress

How-To GuidesSEO Tips & StrategiesWordPress Tutorials

How To Redirect Old Website To New Domain Without Losing SEO | 301 Domain Redirect

Computer Tips & TricksHow-To Guides

How to Repair a Bad Hard Disk (Hard Disk Low Level Format)

How-To GuidesTech Tips, Tools & Tutorials

How to Remove URLs From Google Search

  • I need help with …

Starting a Blog

WordPress SEO

WordPress Performance

WordPress Errors

WordPress Security

Got A Question?

Need Expert Help?
Let CodeXcool power up your website with
custom WordPress design, speed optimization, and SEO!
🚀 Get Started

You Might also Like

WordPress & Website Development

Best FAQ WordPress Plugins (Expert Pick)

Performance OptimizationPlugins & Tools

Top 7 Best SEO Plugins for WordPress in 2025 (Free & Paid)

Web Development & CodingWordPress & Website Development

Essential Things To Do After Installing WordPress – Must Read!

How-To GuidesWordPress Tips & Tricks

How To disable file editing in WordPress admin

EncodeByte

© 2025 EncodeByte – Discover expert tech tutorials, coding guides, troubleshooting solutions, and free tools. Simplify technology, build smarter, and learn faster with us.

About Us / Privacy Policy / Contact Us

Latest News

  • Coming Soon
  • Coming Soon
  • Coming Soon
  • Coming Soon

Services

  • Coming Soon
  • Coming Soon
  • Coming Soon
  • Coming Soon

Looking for custom web development or maintenance?

Check out our parent team at [CodeXcool.com] 🚀
— Let's build together!
Request a Quote
Welcome Back!

Sign in to your account

Username or Email Address
Password

Lost your password?