How To Easily Create a Circle Button In Elementor
Step 1: the Essential Styles Settings
- Start by choosing your button’s background color(s) and selecting the desired font.
- Next, ensure all padding fields at the bottom have the same value (e.g., 50px as shown in the image).
- Then, change the border-radius unit from px to %, and set all border-radius fields to 50%.
Step 2: Adding the Code
Paste the code below into the CSS field in the advanced section of your widget.
selector a{
display: inline-flex;
}
selector .elementor-button-content-wrapper{
align-items: center;
}
selector a:before{
content: "";
display: block;
padding-top: 100%
}
This will create perfectly circular buttons for you!