diff --git a/src/editor/components/index.js b/src/editor/components/index.js
index 34fa18b5..8fe64017 100644
--- a/src/editor/components/index.js
+++ b/src/editor/components/index.js
@@ -1 +1,2 @@
import './seButton.js';
+import './seFlyingButton.js';
diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js
new file mode 100644
index 00000000..aef17238
--- /dev/null
+++ b/src/editor/components/seFlyingButton.js
@@ -0,0 +1,229 @@
+/* eslint-disable max-len */
+const template = document.createElement('template');
+template.innerHTML = `
+
+
+
+`;
+/**
+ * @class FlyingButton
+ */
+export class FlyingButton extends HTMLElement {
+ /**
+ * @function constructor
+ */
+ constructor () {
+ super();
+ // create the shadowDom and insert the template
+ this._shadowRoot = this.attachShadow({mode: 'open'});
+ this._shadowRoot.appendChild(template.content.cloneNode(true));
+ // locate the component
+ this.$open = this._shadowRoot.querySelector('.menu-button');
+ this.$img = this._shadowRoot.querySelector('img');
+ }
+ /**
+ * @function observedAttributes
+ * @returns {any} observed
+ */
+ static get observedAttributes () {
+ return ['title', 'src', 'pressed', 'disabled'];
+ }
+ /**
+ * @function attributeChangedCallback
+ * @param {string} name
+ * @param {string} oldValue
+ * @param {string} newValue
+ * @returns {void}
+ */
+ attributeChangedCallback (name, oldValue, newValue) {
+ if (oldValue === newValue) return;
+ switch (name) {
+ case 'titloe':
+ {
+ const shortcut = this.getAttribute('title');
+ this.$open.setAttribute('title', `${newValue} [${shortcut}]`);
+ }
+ break;
+ case 'src':
+ this.$img.setAttribute('src', newValue);
+ break;
+ case 'pressed':
+ if (newValue) {
+ this.$div.classList.add('pressed');
+ } else {
+ this.$div.classList.remove('pressed');
+ }
+ break;
+ case 'disabled':
+ if (newValue) {
+ this.$div.classList.add('disabled');
+ } else {
+ this.$div.classList.remove('disabled');
+ }
+ break;
+ default:
+ // eslint-disable-next-line no-console
+ console.error(`unknown attribute: ${name}`);
+ break;
+ }
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get title () {
+ return this.getAttribute('title');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set title (value) {
+ this.setAttribute('title', value);
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get pressed () {
+ return this.hasAttribute('pressed');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set pressed (value) {
+ // boolean value => existence = true
+ if (value) {
+ this.setAttribute('pressed', 'true');
+ } else {
+ this.removeAttribute('pressed', '');
+ }
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get disabled () {
+ return this.hasAttribute('disabled');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set disabled (value) {
+ // boolean value => existence = true
+ if (value) {
+ this.setAttribute('disabled', 'true');
+ } else {
+ this.removeAttribute('disabled', '');
+ }
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get src () {
+ return this.getAttribute('src');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set src (value) {
+ this.setAttribute('src', value);
+ }
+}
+
+// Register
+customElements.define('se-flyingbutton', FlyingButton);
diff --git a/src/editor/index.html b/src/editor/index.html
index c106cf8b..bc417f37 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -380,13 +380,8 @@
+
+