# Dashboard 3D Button Style

**URL:** <https://discourse.nodered.org/t/dashboard-3d-button-style/60750>\
**Category:** Dashboard\
**Created:** [4 April 2022 04:47 UTC](https://discourse.nodered.org/t/dashboard-3d-button-style/60750 "2022-04-04T04:47:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![DrdP](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DrdP](https://discourse.nodered.org/u/DrdP)\
**Post date:** [4 April 2022 04:47 UTC](https://discourse.nodered.org/t/dashboard-3d-button-style/60750/1 "2022-04-04T04:47:45Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/3/a3700686e06b63bbbfa23bb3f9e542487d5cacf0.png)

HMI

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bd2cf9371353cc4bb7515543ea482bc5f036ba1e.jpeg)

Thanks you

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 April 2022 09:09 UTC](https://discourse.nodered.org/t/dashboard-3d-button-style/60750/2 "2022-04-04T09:09:12Z")

</div>

> [@DrdP](#):
>
> wondering if the buttons on a dashboard could look 3D

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 April 2022 10:13 UTC](https://discourse.nodered.org/t/dashboard-3d-button-style/60750/3 "2022-04-04T10:13:06Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/79f592f025015c3011219dd73214dfa1a8f154bd.jpeg)](https://discourse.nodered.org/t/pretty-dashboard-buttons-with-reset-and-timeout/45403)

You can get a good 3D impression using box-shadow. Lots and lots of examples of that [here](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/66)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 May 2022 10:13 UTC](https://discourse.nodered.org/t/dashboard-3d-button-style/60750/4 "2022-05-04T10:13:21Z")

</div>

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