🐛 Use buttons for Termynal controls (#2063)

diff --git a/docs/css/termynal.css b/docs/css/termynal.css
index a2564e2860a4b423dd9f5aead6123ac61c5571f4..daa6038a0a8a386d6315b541c501a9a2abddc650 100644 (file)
--- a/docs/css/termynal.css
+++ b/docs/css/termynal.css
@@ -55,10 +55,19 @@
     text-align: center;
 }
 
-a[data-terminal-control] {
+button[data-terminal-control] {
+    cursor: pointer;
     text-align: right;
     display: block;
+    width: 100%;
     color: #aebbff;
+    border: 0;
+    background: transparent;
+    font: inherit;
+}
+
+button[data-terminal-control]:hover {
+    color: var(--color-text);
 }
 
 [data-ty] {

diff --git a/docs/js/termynal.js b/docs/js/termynal.js
index db71f65a5c7abbace5e254c96fd72043468b63a2..de4d8d1442e93d761007e4be0c28dcf6b157d8da 100644 (file)
--- a/docs/js/termynal.js
+++ b/docs/js/termynal.js
@@ -127,27 +127,29 @@ class Termynal {
     }
 
     generateRestart() {
-        const restart = document.createElement('a')
-        restart.onclick = (e) => {
-            e.preventDefault()
+        const restart = document.createElement('button')
+        restart.type = 'button'
+
+        restart.onclick = () => {
             this.container.innerHTML = ''
             this.init()
         }
-        restart.href = 'javascript:void(0)'
+
         restart.setAttribute('data-terminal-control', '')
         restart.innerHTML = "restart ↻"
         return restart
     }
 
     generateFinish() {
-        const finish = document.createElement('a')
-        finish.onclick = (e) => {
-            e.preventDefault()
+        const finish = document.createElement('button')
+        finish.type = 'button'
+
+        finish.onclick = () => {
             this.lineDelay = 0
             this.typeDelay = 0
             this.startDelay = 0
         }
-        finish.href = 'javascript:void(0)'
+
         finish.setAttribute('data-terminal-control', '')
         finish.innerHTML = "fast →"
         this.finishElement = finish