On a recent project I was developing an application which made extensive use of out-of-the-box widgets, but I also needed to create my own custom functionality. I wanted my custom buttons and tools to look like the other widgets for consistency, but the instructions for creating a "proper" widget are intimidatingly complex, so I was looking for a simpler way to accomplish this.
It turns out to be quite a simple matter to insert a custom button into the DOM, and style it to match the other widgets:
In this example the button is appended to the
esri-ui-top-left section, which adds it below the existing zoom widget.
See the interactive demo at https://codepen.io/slead/pen/zyjOpm