Custom Code for Button Hover

Custom Coding
1

I am trying to write custom CSS for the button color to change on hover. I can’t seem to nail down the class. I found a forum contribution from May that addresses this, but didn’t seem to work for me, so not sure if something has been deprecated.

<a class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiBox-root css-1jjgc7y" tabindex="0" data-action-button-id="list2-visible-btn-_z6gx6z294-rec2h1ZAcbz3eJoX9"
2

Hi,

.MuiButtonBase-root is the selector. Then :nth-child() can be used to point a specific button in a block.

To change the color (background, text color and border color) of the button (or all buttons) of a CTA block named #cta2, on hover, for example:

<style>
#cta2 .MuiButtonBase-root:hover {
    background-color: #000000 !important;
    color: #000000 !important;
    border-color: #F5E507 !important;
}
</style>

Same logic for any button of a dynamic block.

3

Thank you, that is what I have been trying. Where is the block name found? I just got thrown into this project recently and I haven’t worked in Softr before.

Edited to add that it seems none of my CSS changes show, I did a simple link change and won’t propagate, even with !important.

a { color: #512379 !important; }
4

Fixed!

5

Reference for those who don’t know where to find the block ID/Name:
When you click a block in the Softr studio it appears here:

Capture d’écran 2023-12-07 091751

6

Hi matthieu_chateau, first comment here!

I’ve used this CSS to add a hover effect to all the buttons in my application (yes, all the buttons), so I’ve ommited the reference to the block (#cta2). However, all menu options, which are not buttons from the UX perspective, are showing the same “hover” effect as the buttons.

Any suggestion on how to avoid this? I want this hover to apply to all buttons, but only buttons…

thank you!