Elementor

How to Disable Buttons in Elementor with Custom CSS

1 min read

To disable buttons in Elementor using custom CSS, you can follow these steps:

  1. Find the Class or Element ID: First, you need to find the class or element ID of the button you want to disable.
    You can use the web browser’s element inspection to find the class or ID.
  2. Add Custom CSS Code: Once you have found the class or element ID, add the following custom CSS code into the CSS custom area in Elementor:
/* Jika menggunakan kelas */
.namakelas {
pointer-events: none;
opacity: 0.5; /* Memberi transparansi pada tombol nonaktif */
}

/* Jika menggunakan ID */
#namaID {
pointer-events: none;
opacity: 0.5; /* Memberi transparansi pada tombol nonaktif */
}

In the example above, replace .namakelas with the class of the button you want to disable, or #namaID with the ID of the button you want to disable.
Property pointer-events: none; will make the button unclickable, while opacity: 0.5; will provide transparency to the button, indicating that it is disabled (you can adjust the opacity value to your liking).

  1. Save and Apply Changes: After adding the custom CSS code, make sure to save your changes in the Elementor editor and preview or update your website to see the changes applied.

Make sure to replace .namakelas or #namaID with the class or ID corresponding to the button you want to disable.
Also, remember that using CSS to change the appearance or behavior of elements may vary depending on the WordPress theme you are using, so you may need to adjust the CSS code according to your specific needs.


Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

× Chat