Elementor Custom CSS Clasess

Some style properties can not generate with Elementor controls. As like, box-shadow on button hover, anchor tag hover color, rotate effect, box-shadow on Image Carousel images. For this reason, we applied these style properties with some custom CSS class.

Here, we are listing those custom CSS classes as references. You can also use these custom CSS class with the associated Elementor widgets. Go to the Advanced tab from the widget editor panel, then put the CSS class in the CSS Classes field. See the screenshot below-

Image Classes

• Use the max-width-none class if you want to disable the Elementor default image max-width: 100% to max-width: none
• Use the image-box-shadow class to apply a box-shadow around an image or images. You can use this class in Image related widgets (Image, Image Carousel, Gallery).
• Use the rotate_effect class, if you want to enable rotating on hovering over an image.

Shadow on button hover

• Use the btn-hover-shadow class, if you want to apply a red color scheme box-shadow on the button hover.
• Use the yellow-btn-hover-shadow class, if you want to apply a yellow color scheme box-shadow on the button hover.
• Use the btn-shadow-none-hover to disable the box-shadow style from a button.
• Use the btn-hover-shadow-black_alpha-1class to apply black alpha 0.1 rgba(0, 0, 0, 0.1) color scheme box-shadow on the button hover.

Note: Apply these CSS classes in the Elementor’s default Button widget only.