Elementor custom CSS classes
Estimated reading : 2 minute
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 imagemax-width: 100%
tomax-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-1
class to apply black alpha 0.1rgba(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.