Easy Elementor Square Images, Buttons and Flip Boxes

In this tutorial you are going to learn how to make Elementor Images, Buttons and Flip Boxes perfectly square.

No matter what size screen, what resolution, mobile, desktop, etc. You will end up with square Elementor images, buttons and flip boxes.

We will be using CSS for this (provided). We won't be using the aspect-ratio CSS property however, as it has lower browser support. Instead, we will be using an old and reliable method that has really good browser support.

Here is an example of the square Elementor images, buttons and flip boxes we will be creating:

Let's get started!

First, let's add the proper class name to your square Elementor element

Under Advanced > CSS classes, give the class name of either of the following.

For a square Elementor image, give the class name

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Square Images, Buttons and Flip Boxes tutorial 
 * Found at this URL https://element.how/elementor-square-image-button-flip-box/ 
 */ 
</script>

For a square Elementor button, give the class name

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Square Images, Buttons and Flip Boxes tutorial 
 * Found at this URL https://element.how/elementor-square-image-button-flip-box/ 
 */ 
</script>

For a square Elementor flip box, give the class name

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Square Images, Buttons and Flip Boxes tutorial 
 * Found at this URL https://element.how/elementor-square-image-button-flip-box/ 
 */ 
</script>

Now, add this CSS code to your project

You can add the CSS anywhere pretty much, as long as it loads on the page(s) where you will have your square elements.

For the Square Elementor Image, add this CSS:

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Square Images, Buttons and Flip Boxes tutorial 
 * Found at this URL https://element.how/elementor-square-image-button-flip-box/ 
 */ 
</script>

For the Square Elementor Button, add this CSS:

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Square Images, Buttons and Flip Boxes tutorial 
 * Found at this URL https://element.how/elementor-square-image-button-flip-box/ 
 */ 
</script>

For the Square Elementor FlipBox, add this CSS:

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Square Images, Buttons and Flip Boxes tutorial 
 * Found at this URL https://element.how/elementor-square-image-button-flip-box/ 
 */ 
</script>

Making circles

To make them circular, you can simply add this line:

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Square Images, Buttons and Flip Boxes tutorial 
 * Found at this URL https://element.how/elementor-square-image-button-flip-box/ 
 */ 
</script>

directly below the line

display: flex;

Setting other aspect ratios

In all of the CSS above, you will see padding-bottom: 100%;

If you change this %, you can get other aspect ratios.

For example, to get 2:1 , you would change it to padding-bottom:200%;

To get 16:9 , change it to padding-bottom: 56.25%;

To get 9:16 , change it to padding-bottom: 177.78%;

And so on.

Ideally, you would then change the CSS class name to something other than 'squareImage', for semantic accuracy.

Extra: Adjusting the Elementor Flip Box Animation Speed

If you would like to change the flip box transition timing, use this CSS:

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Square Images, Buttons and Flip Boxes tutorial 
 * Found at this URL https://element.how/elementor-square-image-button-flip-box/ 
 */ 
</script>

Adjust the 0.3s as you wish.

Finally, enjoy your square Elementor images, buttons and flip boxes!

I hope you have enjoyed this tutorial!

Cheers!