Dashboard 3D Button Style

Dashboard
1

My current dashboard theme setup looks like this picture below. I have seen an HMI and was wondering if the buttons on a dashboard could look 3D like the picture at the bottom.

image
image674×622 36.9 KB

HMI

image
image1920×1440 158 KB

Thanks you

2

Sure, the dashboard is just HTML+CSS

If you are not familiar with CSS there are thousands of examples of creating 3D looking buttons on the internet.

  • Find some CSS you like
  • Add custom CSS class in a ui-template node (set for HEAD only)
  • Add the class name to your buttons
3

Here is a simple example using CSS to enhance the appearance of dashboard buttons. (Click the button to visit it.)
This example predates the custom class feature which Steve mentions.
Untitled 3

You can get a good 3D impression using box-shadow. Lots and lots of examples of that here

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.