Tutorial

Cool attention-getter button

Video

Description

This tutorial demonstrates a standard Elementor Button Widget, styled with CSS to make it round, with a pulsating border on hover.

The global CSS rules can easily be overridden with Attributes to make each instance unique.

No JavaScript is required.

Steps

CSS Rules
Add Buttons to the Editor
Customizing the Amination Timing

CSS Rules

Copy and Paste the CSS below to your preferred location.

Add Buttons to the Editor

We are going to create 3 buttons, each with different effects.

Button 1

Drag an Elementor Button to the Editor .
Add the class "wpg-button-round-pulse" to the Button Widget. You should see it change immediately.
Add 3px Padding on all sides. Note: do not use "margin" as it will distort the border.

Button 2

Right-click Button 1 and duplicate.
Go to Advanced -> Attributes
Add - style|--border-color: red;--border-max-width: 12px;--max-scale: 1.5;
Save and view the page to see the effect.

Button 3

Right-click Button 2 and duplicate.
Go to Advanced -> Attributes
Add - style|--border-color: blue;--border-max-width: 20px;--max-scale: 2;--duration: 2s;
Save and view the page to see the effect.

NOTE: You will not see the Attribute effects in the Editor, only on the Frontend

Customizing the Amination Timing

Bring up Chrome Dev Tools by pressing F12.
Click the Element Selector button (Top Left, small box with arrow).
Click Button 3.
Click the DOM element with the class "wpg-button-round-pulse";
Right Click on that Element, point at "Force State", and Click ":hover". You should see the animation.
Click the "::before" pseudo Element after this Element.
Loot at the Styles Window for the "animation-timing-function", it will currently be set to "var(--timing-function)"
Change it to "ease", you will see the animation flow change a bit.
Click the purple icon next to "ease", and play with the handles by dragging them. Watch for the effect you want.
Copy the entire "Cubic Bezier"
Go back to Advanced -> Attributes and add - --timing-function: paste Cubic Bezier here
Save
View the page

Code (click to copy)

CSS (css)

If you have Elementor PRO, Paste into Site Settings -> Custom CSS
If you have Elementor Free, Paste it into Customize -> Additional CSS. You will not be able to use "selector", so you will need to replace this with something else to make it more specific.

Notes:

CSS rules below are prefixed with "wpg-". Always prefix your rules with something unique. This will prevent clashes with CSS rules from Themes and Plugins.

Change the variables to get your desired results.

/*####################
NOTE: selector used to make rules more specific. 
Some properties were being overriden by more specific Elementor classes
The preference is to make these rules more specific rather than use !important.
*/

/**********************
Variables - 
For Widgets with unique attributes, Override with Advanced -> Attributes
eg.
style|--border-color: blue;
*/
selector .wpg-button-round-pulse{
    --border-color: orange;
    --duration: 1s;
    --max-scale: 1.2;
    --height: 150px;
    --width: 150px;
    --border-min-width: 1px;
    --border-max-width: 8px;
    --standoff: 8px;
    --timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
    transition: all var(--duration);
    max-width: 100%;
    width: unset;
    margin:0;
}

/**********************
Basic width, Height, Alignment
*********************/
selector .wpg-button-round-pulse .elementor-button {
    width: var(--width);
    height: var(--height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--width);
}


/********************
 Button stand off
 *******************/
 selector .wpg-button-round-pulse .elementor-button{
     box-shadow: 1px 1px 5px #00000066;
 }
 selector .wpg-button-round-pulse:hover{
     z-index: 99999;
     transform: translateY(calc(-1 * var(--standoff))) translateX(calc(-1 * var(--standoff))) ;
     transition: transform var(--duration);
 }
 selector .wpg-button-round-pulse .elementor-button:hover{
     box-shadow: 16px 16px calc( var(--standoff) * 2) #00000033;
 }
 

/********************
 PULSING border
 *******************/
selector .wpg-button-round-pulse:before{
    content: ' ';
    border: none;
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left:0;
    border-radius: var(--width);
    pointer-events: none;
}

selector .wpg-button-round-pulse:hover:before{
    animation-name: wpg-button-round-pulse;
    animation-duration: var(--duration);
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function);
}

@keyframes wpg-button-round-pulse{
    0%{
        border: var(--border-min-width) solid var(--border-color);
        transform: scale(1);
        opacity: 1;
    }
    50%{
        border: var(--border-max-width) solid var(--border-color);
        transform: scale(var(--max-scale));
        opacity: 0;
    }
    100%{
        border: var(--border-min-width) solid var(--border-color);
        transform: scale(1);
        opacity: 1;
    }
}