Use `<button>` where appropriate

diff --git a/index.html b/index.html
index 0c990daae1be758d89e130170e1318d69ff493e9..5a92eaa0f7cfde2a69bb401800e15c1ee5671b10 100644 (file)
--- a/index.html
+++ b/index.html
@@ -32,6 +32,15 @@
                                margin: 0 0 6px 0;
                                font-size: 24px;
                        }
+                       button {
+                               background: none;
+                               color: inherit;
+                               border: none;
+                               padding: 0;
+                               font: inherit;
+                               cursor: pointer;
+                               outline: inherit;
+                       }
                        code {
                                font-family: monospace;
                                font-size-adjust: 0.5;
@@ -120,6 +129,7 @@
                        }
                        .go-button {
                                cursor: pointer;
+                               display: flex;
                        }
                        .footer {
                                color: white;
@@ -274,9 +284,11 @@
                                        <span class="bitcoin fill-fixed">₿</span>
                                        <input class="fill-use-remaining text-box" type="text" id="address" value="send.some@satsto.me"/>
                                        <!-- SVG from bootstrap icons, Copyright (c) 2019-2024 The Bootstrap Authors, MIT License -->
-                                       <svg onclick="lookup_domain()" id="paybutton" xmlns="http://www.w3.org/2000/svg" fill="white" class="go-button go-button-disabled fill-fixed" viewBox="0 0 17 17">
-                                               <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/>
-                                       </svg>
+                                       <button title="Lookup Address" onclick="lookup_domain()" id="paybutton" class="go-button go-button-disabled">
+                                               <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 17 17" class="go-button-svg">
+                                                               <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/>
+                                               </svg>
+                                       </button>
                                </div>
                                <div class="errors" id="errors"></div>
                                <div class="right-header-second-paragraph center-contents">
@@ -437,7 +449,7 @@
                                        var addr_idx = 0;
                                        const base_and_params = bip353.substring(8).split("?");
                                        const push_table_entry = function(ty, uri_pfx, contents) {
-                                               var value = "<h2 class='address-type'>" + ty + "<a class='address-copy' id='addr_copy_" + addr_idx + "' onclick=\"copy('" + contents + "', " + addr_idx + ")\">" + CLIPBOARD_SVG + "</a></h2>";
+                                               var value = "<h2 class='address-type'>" + ty + "<button title='Copy Address' class='address-copy' id='addr_copy_" + addr_idx + "' onclick=\"copy('" + contents + "', " + addr_idx + ")\">" + CLIPBOARD_SVG + "</button></h2>";
                                                if (!/^[\p{ASCII}]*$/u.test(contents)) {
                                                        value = "Invalid";
                                                } else {