🐛 Use buttons for Termynal controls (#16132)

docs/en/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] {

docs/en/docs/js/termynal.js

@@ -127,27 +127,29 @@ class Termynal {
     }
 
     generateRestart() {
-        const restart = document.createElement('a')
+        const restart = document.createElement('button')
-        restart.onclick = (e) => {
+        restart.type = 'button'
-            e.preventDefault()
+
+        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')
+        const finish = document.createElement('button')
-        finish.onclick = (e) => {
+        finish.type = 'button'
-            e.preventDefault()
+
+        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