Skip to Content
0
Aug 04, 2023 at 11:09 PM

Changing hover color for SAPUI5 buttons

214 Views

I am working on a SAPUI5/Fiori project, and I'm facing difficulties in customizing the hover color for buttons. I want the hover color to be #D4A418 when the cursor passes over the buttons. The problem seems to be related to the predefined class "sapMBtnHoverable," which is interfering with my custom styles.

I have already tried various ways to override the styles, but the default hover color persists. When I toggle off the "sapMBtnHoverable" class in the browser console, the hover effect looks exactly as I want it to.

Additionally, when a button is selected, a blue border appears, and I suspect it is related to the "sapMFocusable" class and the same problem as the hover.

Below i show my XML and CSS:

Thank you!

 
<mvc:View
xmlns:core="sap.ui.core"
xmlns:form="sap.ui.layout.form"
controllerName="torneiobelio.torneiobelio.controller.Main"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:tnt="sap.tnt"
height="100%"
width="100%">
<tnt:ToolHeader class="navBar">
    <Button
        text="Players"
        type="Transparent"
        class="sapMBtnBase sapMBtn navButtonText customHoverColor sapMBarChild"
    >
        <layoutData>
            <OverflowToolbarLayoutData priority="NeverOverflow"/>
        </layoutData>
    </Button>
    <Button
        text="UEFA"
        type="Transparent"
        class="navButtonText"

    >
        <layoutData>
            <OverflowToolbarLayoutData priority="NeverOverflow"/>
        </layoutData>
    </Button>
    
    <Button
        icon="sap-icon://home"
        type="Transparent"
        class="navButtonIcon"

    >
        <layoutData>
            <OverflowToolbarLayoutData priority="NeverOverflow"/>
        </layoutData>
    </Button>
    
    <Button
        text="Leagues"
        type="Transparent"
        class="navButtonText"

    >
        <layoutData>
            <OverflowToolbarLayoutData priority="NeverOverflow"/>
        </layoutData>
    </Button>
    <Button
        text="Prizes"
        type="Transparent"
        class="navButtonText"

    >
        <layoutData>
            <OverflowToolbarLayoutData priority="NeverOverflow"/>
        </layoutData>
    </Button>
</tnt:ToolHeader></mvc:View>
.sapMBtn.navButtonText:hover .sapMBtnContent {
    border-bottom: 2px solid #D4A418 !important; 
    color: #D4A418 !important;
  }


.sapMBtn.navButtonText:active .sapMBtnContent {
    color: #D4A418 !important; 
    border-bottom: 2px solid #D4A418 !important;
  }


.navButtonIcon .sapMBtnIcon {
    font-size: 3rem !important;

}