How to Create Animated Button in Elementor?

How to Create Animated Button in Elementor?

Why Animated Buttons Can Transform Your Website’s User Experience

In the digital age, website design isn’t just about aesthetics—it’s about creating an engaging, intuitive experience for visitors. One often-overlooked element that can make a significant impact is the animated button. This small but powerful design feature can transform the way users interact with your website.

Grabbing Attention with Motion

With so much content competing for attention, it’s crucial to make sure your website stands out. Animated buttons are a simple yet effective way to do this. A button that grows, pulses, or changes color on hover immediately catches the eye, drawing attention to key actions like signing up, making a purchase, or clicking for more information.

Encouraging User Engagement

Beyond catching attention, animated buttons encourage interaction. When users see movement or a visual change, they’re more likely to engage. The animation acts as a subtle nudge, making the button seem inviting and clickable. This can increase clicks on your calls-to-action (CTAs) and, ultimately, drive more conversions.

Enhancing the User Experience

A well-placed animated button doesn’t just look good—it also improves the user experience. Interactive elements like hover effects give users immediate feedback, making your site feel dynamic and responsive. This can boost user satisfaction and keep visitors engaged longer.

Boosting Conversions

When it comes to optimizing your website for conversions, small details matter. Adding animation to buttons can improve the visibility and effectiveness of your CTAs, resulting in more leads, sign-ups, and sales. It’s a simple tweak that can have a big impact on your bottom line.

Incorporating animated buttons into your website design isn’t just about looks—it’s about creating a more engaging, user-friendly experience that encourages action.

Creating an animated button in Elementor is a simple yet effective way to enhance your website’s interactivity. Here’s a step-by-step guide to creating an animated button:

Install & Activate Elementor on WordPress Dashboard

1. Go to plugin option, click on add new plugin
2. Search Elementor in search bar
3. You can see the Elementor Plugin click on install and then activate it.

Step 1: Open Elementor Editor

1. Log in to WordPress and navigate to the page you want to edit.
2. Click “Edit with Elementor” to open the Elementor editor.

Step 2: Add a Button Widget

1. In the Elementor editor, click the “+” button to add a new section.
2. Choose the section structure you want.
3. In the Widgets Panel, search for the “Button” widget.
4. Drag and drop the Button widget into your selected section.

Step 3: Customize the Button Text and Link

1. In the Content tab of the Button widget:
   • Set the Text for your button (e.g., “Click Me”).
   • Add the URL or page link you want the button to direct users to.

Step 4: Style the Button

1. Switch to the Style tab to start customizing the look.
2. Adjust the Typography, Text Color, and Background Color to fit your design.

Step 5: Add Hover Animation

1. Still in the Style tab, scroll down to find the Hover section.
2. In the Hover Animation dropdown, choose an animation like Grow, Shrink, or Pulse. This will add simple hover effects.

Step 6: Create Advanced Animation with Custom CSS (Optional)

For more advanced animations, you can use custom CSS. To do this, follow these steps:

1. Go to the Advanced Tab of the button widget.
2. Open the Custom CSS section (this option is available in the Pro version).
3. Add CSS code for the desired animation. Here’s an example for a bouncing animation:

You have to go to the advanced option. You can see the Class name. You have to give a ” btn ” name to it so that the code can be applied to the button widget.

Install Royal Elementor Addon & Activate

If you have don’t have Elmentor Pro Plugin you can use Royal Elementor Addon Plugin to add custom code below to get animated button in Elementor.

Copy Code and just paste in Elmentor Button Widget > Advanced Option > Custom CSS Option given by Royal > Paste code here.

    .colour{
       color:#7d4ac7;
    }
     .highlight2{
       color:#FFC107;
    }
    .Gradient{
    background: linear-gradient(155.91deg, #FFCC00 0%,  #F2295B 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent
    }
    .Gradient2{
    background: linear-gradient(155.91deg, #FFCC00 0%,  #F87232 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent
    }
    .bold{
        font-weight:700;
    }
    .underline{
        text-decoration: underline;
    }
.btn{
    
        background-image: linear-gradient(
60deg
,#f79533,#cc9305,#c86c00,#FFC502) !important;
    -webkit-animation: animatedgradient 3s ease infinite alternate;
    animation: animatedgradient 3s ease infinite alternate;
    background-size: 300% 300%;
    border-radius: 7px;
}

@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
	 10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.checkmark {
 display: block;
 width: 30px;
 height: 30px;
 background-color: #ddd;
 border-radius: 4px;
 position: relative;
 transition: background-color 0.4s;
 overflow: hidden;
 cursor: pointer;
}

#check:checked ~ .checkmark {
 background-color: #E99320;
}

.checkmark::after {
 content: "";
 position: absolute;
 width: 7px;
 height: 15px;
 border-right: 3px solid #2d2d2d;
 border-bottom: 3px solid #2d2d2d;
 top: 44%;
 left: 50%;
 transform: translate(-50%, -50%) rotateZ(40deg) scale(10);
 opacity: 0;
 transition: all 0.4s;
}

#check:checked ~ .checkmark::after {
 opacity: 1;
 transform: translate(-50%, -50%) rotateZ(40deg) scale(1);
}
 input.checkbox {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

You can change four colors in the code where all 4 colors are highlighted. You can see you can change them according to your brand theme colors.

Step 7: Publish Or Update

1. After applying the hover animation, click Preview to see how your button looks with the animation.
2. Once satisfied, click Update to save the changes.

Now, you have an animated button in Elementor! You can further customize animations with advanced options if you have Elementor Pro.

If you get any help and get any doubts you can comment below. I will help you to solve your doubts.

Thank you for reading.