Adding effects to an action button

Custom Coding
,
1

Hi, I found a way to add visual design effects to action buttons.
Just put this code in a custom code block

<style>
.MuiButton-containedSizeMedium.MuiBox-root.css-u7dt1h{
background-color: #9796FC;
color: #FFFFFF;
border-radius: 14px;
border-color: #FFFFFF;
}
.MuiButton-containedSizeMedium.MuiBox-root.css-u7dt1h:hover{
background-color: #D31FCA;
color: #FFFFFF;
border-color: #FFFFFF;
}
.MuiButton-containedSizeMedium.MuiBox-root.css-u7dt1h:active{
transform: translateY(4px);
}
</style>

I have attached a video here that demonstrates the result Here

Important point - how to find the class ID of the action button:
It can be found in the code of the button, starting from the place I marked in red.

image
image1246Ă—367 28.2 KB

Copy the class ID, add a dot in front of it and replace every space with a dot

This is the way I found.
I would love to hear if there is a simpler and more correct way

1 Like
2

Hi,
Be careful with the use of .cssxxxx => this might be deprecated in the next weeks/months for buttons. Softr team is looking into having an easier way to find class selectors for buttons.

The correct code (well at least better to maintain) would be :point_down: - Also It allows to have a design continuity as the buttons of the edit/add modals will be transformed too (example/demo here by clicking on add record).

To be inserted in the header of the “custom code” page settings

<style>
#listxx .MuiButtonBase-root{
background-color: #9796FC;
color: #FFFFFF;
border-radius: 14px;
}
#listxx .MuiButtonBase-root:hover{
background-color: #D31FCA;
}
#listxx .MuiButtonBase-root:active{
transform: translateY(4px);
}
</style>

If you want the white border color from your code to appear, you need to activate the border in the softr studio first. So not very useful as it should be set up in the Studio, button settings, but here it is:

<style>
#listxx .MuiButtonBase-root{
background-color: #9796FC;
color: #FFFFFF;
border-radius: 14px;
border-color: #FFFFFF;
border-width: 2px; /*border must be set to "1" in the Softr studio first */
}
#listxx .MuiButtonBase-root:hover{
background-color: #D31FCA;
}
#listxx .MuiButtonBase-root:active{
transform: translateY(4px);
}
</style>

Note that if you want to keep a design parameter in :hover and :active, you don’t need to re-write it. Think of a cascade: everything that is written in the first part of the css code is kept within :hover and :active for the same selector. Unless you want to change it

1 Like
3

thank you very much @matthieu_chateau About the tips, that’s great.

I have a problem with the class id you gave “#listxx .MuiButtonBase-root”
This also affects the top bar button, and I want this design to only be on the item’s action buttons

5

For this case you would have two options. You can use

#listxx .css-6oewgg button {
  background-color: #9796FC;
  color: #FFFFFF;
  border-radius: 14px;
}

#listxx .css-6oewgg button:hover {
  background-color: #D31FCA;
}

#listxx .css-6oewgg button:active {
  transform: translateY(4px);
}

As .css-6oewgg is not a button (it’s the action buttons wrapper) it should be ok on a long term… Though I am not sure if .css-6oewgg would also be deprecated… :sweat_smile:

So the other solution is

#listxx .actions-button-wrapper:nth-child(2) button {
  background-color: #9796FC;
  color: #FFFFFF;
  border-radius: 14px;
}

#listxx .actions-button-wrapper:nth-child(2) button:hover {
  background-color: #D31FCA;
}

#listxx .actions-button-wrapper:nth-child(2) button:active {
  transform: translateY(4px);
}

I use .actions-button-wrapper:nth-child(2) as the top bar button(s) are also inside an .action-button-wrapper.
nth-child() is useful to determine the first, second, third, etc. element of a same class. It allows you to not depend on certain arbitrary class names given by Softr.

Here it is made for #listxx but if you want to apply this to all of your list blocks of your page (+ maybe list details and table blocks but I didn’t check) just remove #listxx

1 Like
6

The solution with “nth-child(2)” is an excellent idea.
Thanks