Button CSS

[former_member783031]

Hi,

how to change button back-ground and text color when it is selected/enabled using CSS in Analytic application?

i have two buttons and background and text color should be changed for the button which is selected.

thanks.

[avsalynin]

venumadhavreddy_mukkala45

in Edit CSS mode, with Button enable 2 standard css classes: .sap-custom-button, sap-custom-button-widget

try some of them. to apply in scripts - use for example api button.setCssClass('button1');

detail about CSS in SAC - here and here

[former_member783031]

Hi avsalynin , Is there a way to change selected button color? every time i click on the button, it should change the color and remain on the same color until I click on another button.

thanks.

[JBARLOW]

You'll need to add CSS scripting to all your buttons,

e.g. if we have 2 buttons
btn_detail
btn_summary

create 2 custom CSS styles:

.BUTTONP .sap-custom-button{background-color: #8a4167} (purple ish hex colour code)
.BUTTONG .sap-custom-button{background-color: #a49f9e} (grey ish hex colour code)

In the 'onClick' event for btn_detail use the script:

btn_detail.setCssClass('BUTTONP');<br>btn_summary.setCssClass('BUTTONG');<br>

In the 'onClick' event for btn_summary use the script:

btn_summary.setCssClass('BUTTONP');<br>btn_detail.setCssClass('BUTTONG');<br>

This will change the background of the clicked button and the background of the other button

edit - ignore the <br> in the code examples

[former_member783031]

Thanks avsalynin for quick reply.

sap-custom-button is setting the default background color for the button

Hover: when the cursor goes there, it changes the color

Active: when you click on the button, it changes the color but I want to change the color of the button which is selected so I can have use multiple buttons as tabs.

Is there an option to change the color of the button which is selected? when i select the second button, previous selected button should go back to default color like we see in tabs.

[avsalynin]

"when i select the second button, previous selected button should go back to default color like we see in tabs" - you can, in this case, reset the class css to empty (button.setCssClass('')) and then there will be a return to the default style

[former_member783031]

ok thanks. how do i change the color of the selected button and color should stay until I choose another button?