Nathan’s Circular Button

1. Create Pseudo Element

.custom-button .elementor-button::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;

    border-radius: 50%;
    background: red;
}
Hover me

2. Positioning of the pseudo element

.custom-button .elementor-button::before {
    /* Add Left and top  value */
    left: 50%;
    top: 50%;
}

As you can see, our pseudo element is at the 50% of the button container, because our pseudo element is not relative to its parent.

Archi Dev
Hover me

3. Set the pseudo element relative to the button (parent)

/* Add position Relative to parent Element of the ::before (Pseudo element) */
.custom-button .elementor-button {
    position: relative;
}

By adding position relative to the pseudo element container (parent), our absolute positioned element is now at the 50% left of the parent element, but this element is not centered yet.

Archi Dev
Hover me

4. Set the position of pseudo element to the center of the button

.custom-button .elementor-button::before {
    /* use calc value
    50% - (width/height of this element divided by 2)
    Ex: 50% - 10px / 2 
    */
    left: calc(50% - 10px / 2);
    top: calc(50% - 10px / 2);
}

Simple math, 50% - width/2 is equals to true center of the absolute positioned element

Archi Dev
Hover me

5. Add hover effect

.custom-button .elementor-button::before {
    /*Add Transition*/
    transition: transform .7s ease, background .5s 0s ease;
}

/*Add Hover Effect*/
.custom-button .elementor-button:hover::before {
    transform: scale(20);
    background: #02bb02;
    transition: transform 1s ease, background 1s .3s ease;
}

The Pseudo element overflows when the parent element overflow is not set to hidden

Archi Dev
Hover me

6. Set overflow hidden

.custom-button .elementor-button {
    /*Add overflow: hidden*/
    overflow: hidden;
}

As you notice, the text is under of the pseudo element. Adding z-index to the element/wrapper of the text will fix this issue

Archi Dev
Hover me

7. Set the z-index of the text and finalize

.custom-button .elementor-button::before {
    /* set scale to zero as default */
    transform: scale(0);
    /* set background color of your choice */
    background: rgba(0, 0, 0, 0.2);
}

.custom-button .elementor-button .elementor-button-content-wrapper {
    /* Set z-index value to 1 */
    z-index: 1;
}

Output:

Hover me

Full Code

.custom-button .elementor-button {
    overflow: hidden;
    position: relative;
}

.custom-buttonx .elementor-button::before {
    content: "";
    position: absolute;
    left: calc(50% - 10px / 2);
    top: calc(50% - 10px / 2);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(0, 0, 0, 0.2);
    transition: transform .7s ease, background .5s 0s ease;
}

.custom-button .elementor-button:hover::before {
    transform: scale(50);
    background: #02bb02;
    transition: transform 1s ease, background 1s .3s ease;
}

.custom-button .elementor-button .elementor-button-content-wrapper {
    z-index: 1;
    position: relative;
}
archicoders

archicoders