<primary-button/>
primary-button {
  display: inline-block;
  border: 2px dashed #95a5a6;
  border-radius: 4px;
}
class PrimaryButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div style="display: inline-block; background: #3498db; border: 2px solid #2980b9; padding: 10px 12px; border-radius: 4px; text-transform: uppercase; font-family: Arial; color: white; cursor: pointer;">Primary Button</div>`;
  }
}

customElements.define('primary-button', PrimaryButton);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.