## html
<div class="node event" style="transform: translate({{ x }}px, {{ y }}px)">
  <sf-template path="Blackprint/nodes/template/header.sf"></sf-template>

  <div class="content">
    <!-- Element event binding-> https://github.com/ScarletsFiction/ScarletsFrame/wiki/Element-Event -->
    <div class="button" @click="clicked(event)">
      <a>Trigger</a>
    </div>

    <div class="right-port">
      <sf-template path="Blackprint/nodes/template/output-port.sf"></sf-template>
    </div>
  </div>

  <sf-template path="Blackprint/nodes/template/other.sf"></sf-template>
</div>

## scss-global
bpic-example-button{
  .button {
    display: inline-flex;
    background: #ffffff1c;
    height: 30px;
    box-shadow: 0 0 8px white;
    width: 100px;
    border: 2px solid #BFC0C0;
    margin: 5px 5px 10px 10px;
    color: #BFC0C0;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1.5px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    a {
      position: relative;
    }
    &:hover {
      background: #ffffff3c;
    }
  }
}

## js-global
// Register Sketch Interface
// This Interface will extends Interface from Button.js
// and add additional feature to control the User Interface for Sketch Editor
Blackprint.Sketch.registerInterface('BPIC/Example/Button',
class ButtonIFace extends Context.IFace.Button {
  // Life cycle: this will run after the element was attached on DOM
  init(){
    // To get the button element
    // this.$el('.button')
  }

  // Override clicked function from Button.js
  clicked(ev){
    Context.log('BPIC/Example/Button (HTML Element)', "'Trigger' button clicked, going to run the handler");
    this.node.clicked?.(ev);

    // You can also
    // super.clicked(ev);
  }
});