Create Button Styles in SAP Analytics Cloud stories

[felixjonathanmueller]

Intro

In SAP Analytics Cloud stories you have the possibility to add a button widget to your story.
In this blog I want to show you how you can create centrally maintained button styles to achieve a consistent button styling with different button styles for your story.

Use Case

In our example use case we want to create the following different button styles:

• Standard
• Emphasized
• Lite
• Accept
• Reject
• Attention

Based on your company’s design system you can add additional button styles or define less button styles.

Solution

In SAP Analytics Cloud we only have on generic widget of the type “button” available. Therefore, to create different button styles we can use the CSS feature. For each button style we create a CSS class with a meaningful name that we can later use in the styling panel to apply the specific button widget.

Here is an example for a standard button that shows the CSS structure:

.button--standard .sap-custom-button{
	color: #0064d9;
	background-color: #FFFFFF;
	border-color: #BCC3CA;
	border-radius: 8px;
}
.button--standard .sap-custom-button:hover{
	color: #0064d9;
	background-color: #eaecee;
	border-color: #BCC3CA;	
}
.button--standard .sap-custom-button:active{
	color: #0064d9;
	background-color: #ffffff;
	border-color: #0064D9;	
}

To apply the button style to the button widget all you need to do is to write the custom CSS class name into the CSS Input Field of the Styling Panel.

Further Considerations

To use these button styles across several stories, you can upload the CSS to a Story Theme. You can then use the custom CSS classes in all Stories that are using this Story Theme.

Ready to use CSS Example

Here is a ready to use CSS snippet that contains all the button styles outlined at the beginning of the blog.
Paste this CSS into the Story CSS Editor and start using these button styles or adapt the color values to apply your own branding from your design system.

/**Standard Button - .button--standard class**/
.button--standard .sap-custom-button{
	color: #0064d9;
	background-color: #FFFFFF;
	border-color: #BCC3CA;
	border-radius: 8px;
}
.button--standard .sap-custom-button:hover{
	color: #0064d9;
	background-color: #eaecee;
	border-color: #BCC3CA;	
}
.button--standard .sap-custom-button:active{
	color: #0064d9;
	background-color: #ffffff;
	border-color: #0064D9;	
}

/**Emphasized Button - .button--emphasized class**/
.button--emphasized .sap-custom-button{
    color:#FFFFFF;
    background-color:#0070F2;
    border-color: #0070F2;
	border-radius: 8px; 
}
.button--emphasized .sap-custom-button:hover{
    color:#FFFFFF;
    background-color:#0064d9;
    border-color:#0064d9;
}
.button--emphasized .sap-custom-button:active{
    color:#0064d9;
    background-color:#ffffff;
    border-color:#0064d9;
}

/*Lite Button - .button--lite class*/
.button--lite .sap-custom-button{
    color:#0064D9;
    background-color:transparent;
    border-color:transparent;
	border-radius:8px;
}
.button--lite .sap-custom-button:hover{
    color:#0064D9;
    background-color:#EAECEE;
    border-color:#BCC3CA;
}
.button--lite .sap-custom-button:active{
    color:#0064D9;
    background-color:#ffffff;
    border-color:#0064D9;
}

/**Accept Button/ Confirm / Positiv - .button--accept class**/
.button--accept .sap-custom-button{
    color:#256F3A;
    background-color:#EBF5CB;
    border-color: #DBEDA1;
	border-radius:8px;
}
.button--accept .sap-custom-button:hover{
    color:#256F3A;
    background-color:#e3f1b6;
    border-color:#e3f1b6;
}
.button--accept .sap-custom-button:active{
    color:#256F3A;
    background-color:#ffffff;
    border-color:#30914C;
}

/* Reject Button */
.button--reject .sap-custom-button{
    color:#AA0808;
    background-color:#FFD6E9;
    border-color:#ffc1df;
	border-radius:8px;
}
.button--reject .sap-custom-button:hover{
    color:#AA0808;
    background-color:#ffbcdc;
    border-color:#ffc1df;
}
.button--reject .sap-custom-button:active{
    color:#AA0808;
    background-color:#ffffff;
    border-color: #E90B0B;
}

/* Attention Button */
.button--attention .sap-custom-button{
    color:#b44f00;
    background-color:#FFF3B7;
    border-color:#FFEA84;
	border-radius:8px;
}
.button--attention .sap-custom-button:hover{
    color:#b44f00;
    background-color:#FFEF9E;
    border-color:#FFEF9E;
}
.button--attention .sap-custom-button:active{
    color:#b44f00;
    background-color:#ffffff;
    border-color: #DD6100;
}