How to: Create a button with custom CSS as a dynamic level indicator
- Derrich Schleich
Owned by Derrich Schleich
Jan 26, 2023
1 min read
Loading data...
The following section describes how to implement the following dynamic level indicator with Button+ and Custom CSS.
Result
The right second (from the top) button shows a dynamic filling depending on the selection of the year. The filling is achieved by background with color gradient defined by expression-based custom CSS. Furthermore, the background color of the text has been adjusted to ensure legibility in filled or unfilled text.
Button configuration
| Property | Value |
|---|---|
| Type | custom |
| Text | ='<span style="background-color: rgba(255,255,255,0.6)">' & Round($([your variable name]) / 0.12) & '% </br>of year selected</span>' |
| Custom css (use expression) | ='background: linear-gradient( to right, rgb(1,112,193) 0%, rgb(1,112,193) ' & Round($([your variable name])/0.12) & '%, rgb(255,255,255) ' & Round($([your variable name])/0.12) & '%, rgb(255,255,255) 100% );' |
Additional information
- CSS linear-gradient documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
- Tutorial: https://www.w3schools.com/css/css3_gradients.asp
- Gradient Generator: http://www.colorzilla.com/gradient-editor
Related articles