Index: src/copybtn.js
==================================================================
--- src/copybtn.js
+++ src/copybtn.js
@@ -1,32 +1,34 @@
 /* Manage "Copy Buttons" linked to target elements, to copy the text (or, parts
 ** thereof) of the target elements to the clipboard.
 **
-** Newly created buttons are <span> elements with an SVG background icon,
-** defined by the "copy-button" class in the default CSS style sheet, and are
-** assigned the element ID "copy-<idTarget>".
-**
-** To simplify customization, the only properties modified for HTML-defined
-** buttons are the "onclick" handler, and the "transition" and "opacity" styles
-** (used for animation).
+** Newly created buttons are <button> elements plus a nested <span> element with
+** an SVG background icon, defined by the "copy-button" class in the default CSS
+** style sheet, and are assigned the element ID "copy-<idTarget>".
 **
 ** For HTML-defined buttons, either initCopyButtonById(), or initCopyButton(),
 ** needs to be called to attach the "onclick" handler (done automatically from
-** a handler attached to the "DOMContentLoaded" event).
+** a handler attached to the "DOMContentLoaded" event). These functions create
+** the nested <span> element if the <button> element has no child nodes. Using
+** static HTML for the <span> element ensures the buttons are visible if there
+** are script errors, which may be useful for Fossil JS hackers (as good parts
+** of the Fossil web UI come down on JS errors, anyway).
 **
 ** The initialization functions do not overwrite the "data-copytarget" and
 ** "data-copylength" attributes with empty or null values for <idTarget> and
 ** <cchLength>, respectively. Set <cchLength> to "-1" to explicitly remove the
 ** previous copy length limit.
 **
 ** HTML snippet for statically created buttons:
 **
-**    <span class="copy-button" id="copy-<idTarget>"
-**      data-copytarget="<idTarget>" data-copylength="<cchLength>"></span>
+**    <button class="copy-button" id="copy-<idTarget>"
+**        data-copytarget="<idTarget>" data-copylength="<cchLength>">
+**      <span></span>
+**    </button>
 */
 function makeCopyButton(idTarget,bFlipped,cchLength){
-  var elButton = document.createElement("span");
+  var elButton = document.createElement("button");
   elButton.className = "copy-button";
   if( bFlipped ) elButton.className += " copy-button-flipped";
   elButton.id = "copy-" + idTarget;
   initCopyButton(elButton,idTarget,cchLength);
   return elButton;
@@ -36,15 +38,18 @@
   var elButton = document.getElementById(idButton);
   if( elButton ) initCopyButton(elButton,idTarget,cchLength);
   return elButton;
 }
 function initCopyButton(elButton,idTarget,cchLength){
-  elButton.style.transition = "";
-  elButton.style.opacity = 1;
   if( idTarget ) elButton.setAttribute("data-copytarget",idTarget);
   if( cchLength ) elButton.setAttribute("data-copylength",cchLength);
   elButton.onclick = clickCopyButton;
+  /* Make sure the <button> contains a single nested <span>. */
+  if( elButton.childElementCount!=1 || elButton.firstChild.tagName!="SPAN" ){
+    while( elButton.firstChild ) elButton.removeChild(elButton.lastChild);
+    elButton.appendChild(document.createElement("span"));
+  }
   return elButton;
 }
 setTimeout(function(){
   var elButtons = document.getElementsByClassName("copy-button");
   for ( var i=0; i<elButtons.length; i++ ){
@@ -53,14 +58,11 @@
 },1);
 /* The onclick handler for the "Copy Button". */
 function clickCopyButton(e){
   e.preventDefault();   /* Mandatory for <a> and <button>. */
   e.stopPropagation();
-  if( this.getAttribute("data-copylocked") ) return;
-  this.setAttribute("data-copylocked","1");
-  this.style.transition = "opacity 400ms ease-in-out";
-  this.style.opacity = 0;
+  if( this.disabled ) return;   /* This check is probably redundant. */
   var idTarget = this.getAttribute("data-copytarget");
   var elTarget = document.getElementById(idTarget);
   if( elTarget ){
     var text = elTarget.innerText.replace(/^\s+|\s+$/g,"");
     var cchLength = parseInt(this.getAttribute("data-copylength"));
@@ -67,15 +69,10 @@
     if( !isNaN(cchLength) && cchLength>0 ){
       text = text.slice(0,cchLength);   /* Assume single-byte chars. */
     }
     copyTextToClipboard(text);
   }
-  setTimeout(function(){
-    this.style.transition = "";
-    this.style.opacity = 1;
-    this.removeAttribute("data-copylocked");
-  }.bind(this),400);
 }
 /* Create a temporary <textarea> element and copy the contents to clipboard. */
 function copyTextToClipboard(text){
   if( window.clipboardData && window.clipboardData.setData ){
     window.clipboardData.setData("Text",text);

Index: src/default.css
==================================================================
--- src/default.css
+++ src/default.css
@@ -1136,19 +1136,40 @@
   white-space: nowrap;
 }
 label[for] {
   cursor: pointer;
 }
-.copy-button {
-  display: inline-block;
+button.copy-button,
+button.copy-button:hover,
+button.copy-button:focus,
+button.copy-button:active {
   width: 14px;
   height: 14px;
 /*Note: .24em is slightly smaller than the average width of a normal space.*/
   margin: -2px .24em 0 0;
   padding: 0;
   border: 0;
+  outline: 0;
+  background: none;
+  font-size: inherit; /* Required for horizontal spacing. */
   vertical-align: middle;
+  user-select: none;
+  cursor: pointer;
+}
+button.copy-button-flipped,
+button.copy-button-flipped:hover,
+button.copy-button-flipped:focus,
+button.copy-button-flipped:active {
+  margin: -2px 0 0 .24em;
+}
+button.copy-button span {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
 viewBox='0,0,14,14'%3E%3Cpath style='fill:black;opacity:0' \
 d='M14,14H0V0h14v14z'/%3E%3Cpath style='fill:rgb(240,240,240)' \
 d='M1,0h6.6l2,2h1l3.4,3.4v8.6h-10v-2h-3z'/%3E%3Cpath style='fill:rgb(64,64,64)' \
 d='M2,1h5l3,3v7h-8z'/%3E%3Cpath style='fill:rgb(248,248,248)' \
@@ -1159,19 +1180,17 @@
 d='M7,8h4v1h-4zm0,2h4v1h-4z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
 }
-.copy-button.disabled {
+button.copy-button:enabled:active span {
+  background-size: 90%;
+}
+button.copy-button:disabled span {
   filter: grayscale(1);
   opacity: 0.4;
 }
-.copy-button-flipped {
-/*Note: .16em is suitable for element grouping.*/
-  margin-left: .16em;
-  margin-right: 0;
-}
 .nobr {
   white-space: nowrap;
 }
 .accordion {
   cursor: pointer;

Index: src/fossil.copybutton.js
==================================================================
--- src/fossil.copybutton.js
+++ src/fossil.copybutton.js
@@ -42,13 +42,11 @@
 
      .oncopy: an optional callback function which is added as an event
      listener for the 'text-copied' event (see below). There is
      functionally no difference from setting this option or adding a
      'text-copied' event listener to the element, and this option is
-     considered to be a convenience form of that. For the sake of
-     framework-level consistency, the default value is a callback
-     which passes the copy button to fossil.dom.flashOnce().
+     considered to be a convenience form of that.
 
      Note that this function's own defaultOptions object holds default
      values for some options. Any changes made to that object affect
      any future calls to this function.
 
@@ -62,25 +60,21 @@
      member is an object with a "text" property holding the copied
      text. Other properties may be added in the future. The event is
      not fired if copying to the clipboard fails (e.g. is not
      available in the current environment).
 
-     As a special case, the copy button's click handler is suppressed
-     (becomes a no-op) for as long as the element has the CSS class
-     "disabled". This allows elements which cannot be disabled via
-     HTML attributes, e.g. a SPAN, to act as a copy button while still
-     providing a way to disable them.
+     The copy button's click handler is suppressed (becomes a no-op)
+     for as long as the element has the "disabled" attribute.
 
      Returns the copy-initialized element.
 
      Example:
 
      const button = fossil.copyButton('#my-copy-button', {
        copyFromId: 'some-other-element-id'
      });
      button.addEventListener('text-copied',function(ev){
-       fossil.dom.flashOnce(ev.target);
        console.debug("Copied text:",ev.detail.text);
      });
   */
   F.copyButton = function f(e, opt){
     if('string'===typeof e){
@@ -103,11 +97,11 @@
     e.addEventListener(
       'click',
       function(ev){
         ev.preventDefault();
         ev.stopPropagation();
-        if(e.classList.contains('disabled')) return;
+        if(e.disabled) return;  /* This check is probably redundant. */
         const txt = extract.call(opt);
         if(txt && D.copyTextToClipboard(txt)){
           e.dispatchEvent(new CustomEvent('text-copied',{
             detail: {text: txt}
           }));
@@ -116,15 +110,19 @@
       false
     );
     if('function' === typeof opt.oncopy){
       e.addEventListener('text-copied', opt.oncopy, false);
     }
+    /* Make sure the <button> contains a single nested <span>. */
+    if(e.childElementCount!=1 || e.firstChild.tagName!='SPAN'){
+      D.append(D.clearElement(e), D.span());
+    }
     return e;
   };
 
   F.copyButton.defaultOptions = {
     cssClass: 'copy-button',
-    oncopy: D.flashOnce.eventHandler,
+    oncopy: undefined,
     style: {/*properties copied as-is into element.style*/}
   };
   
 })(window.fossil);

Index: src/fossil.numbered-lines.js
==================================================================
--- src/fossil.numbered-lines.js
+++ src/fossil.numbered-lines.js
@@ -23,13 +23,10 @@
       .replace(/&?\budc=[^&]*/,'') /* "update display prefs cookie" */
       .replace(/&?\bln=[^&]*/,'') /* inbound line number/range */
       .replace('?&','?');
   const lineState = { urlArgs: urlArgsRaw, start: 0, end: 0 };
   const lineTip = new F.PopupWidget({
-    style: {
-      cursor: 'pointer'
-    },
     refresh: function(){
       const link = this.state.link;
       D.clearElement(link);
       if(lineState.start){
         const ls = [lineState.start];
@@ -48,23 +45,22 @@
         D.append(link, "No lines selected.");
       }
     },
     init: function(){
       const e = this.e;
-      const btnCopy = D.span(),
-            link = D.span();
+      const btnCopy = D.attr(D.button(), 'id', 'linenum-copy-button');
+            link = D.label('linenum-copy-button');
       this.state = {link};
       F.copyButton(btnCopy,{
         copyFromElement: link,
         extractText: ()=>link.dataset.url,
         oncopy: (ev)=>{
-          D.flashOnce(ev.target, undefined, ()=>lineTip.hide());
+          setTimeout(()=>lineTip.hide(), 400);
           // arguably too snazzy: F.toast.message("Copied link to clipboard.");
         }
       });
-      this.e.addEventListener('click', ()=>btnCopy.click(), false);
-      D.append(this.e, btnCopy, link)
+      D.append(this.e, btnCopy, link);
     }
   });
 
   tbl.addEventListener('click', ()=>lineTip.hide(), true);
   

Index: src/fossil.page.chat.js
==================================================================
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -901,14 +901,13 @@
           const cpId = 'copy-to-clipboard-'+id;
           /* ^^^ copy button element ID, needed for LABEL element
              pairing.  Recall that we destroy all child elements of
              `content` each time we hit this block, so we can reuse
              that element ID on subsequent toggles. */
-          const btnCp = D.attr(D.addClass(D.span(),'copy-button'), 'id', cpId);
+          const btnCp = D.attr(D.addClass(D.button(),'copy-button'), 'id', cpId);
           F.copyButton(btnCp, {extractText: ()=>child._xmsgRaw});
           const lblCp = D.label(cpId, "Copy unformatted text");
-          lblCp.addEventListener('click',()=>btnCp.click(), false);
           D.append(content, D.append(D.addClass(D.span(), 'nobr'), btnCp, lblCp));
         }
         delete e.$isToggling;
         D.append(content, child);
         return;

Index: src/fossil.page.pikchrshow.js
==================================================================
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -47,11 +47,11 @@
     document.body.classList.add('pikchrshow');
     P.e = { /* various DOM elements we work with... */
       previewTarget: E('#pikchrshow-output'),
       previewLegend: E('#pikchrshow-output-wrapper > legend'),
       previewCopyButton: D.attr(
-        D.addClass(D.span(),'copy-button'),
+        D.addClass(D.button(),'copy-button'),
         'id','preview-copy-button' 
       ),
       previewModeLabel: D.label('preview-copy-button'),
       btnSubmit: E('#pikchr-submit-preview'),
       btnStash: E('#pikchr-stash'),
@@ -119,11 +119,10 @@
     }, false);
 
     ////////////////////////////////////////////////////////////
     // Setup clipboard-copy of markup/SVG...
     F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
-    P.e.previewModeLabel.addEventListener('click', ()=>P.e.previewCopyButton.click(), false);
 
     ////////////////////////////////////////////////////////////
     // Set up dark mode simulator...
     P.e.cbDarkMode.addEventListener('change', function(ev){
       if(ev.target.checked) D.addClass(P.e.previewTarget, 'dark-mode');
@@ -348,11 +347,11 @@
       D.addClass(preTgt, 'error');
       this.e.previewModeLabel.innerText = "Error";
       return;
     }
     D.removeClass(preTgt, 'error');
-    D.removeClass(this.e.previewCopyButton, 'disabled');
+    this.e.previewCopyButton.disabled = false;
     D.removeClass(this.e.markupAlignWrapper, 'hidden');
     D.enable(this.e.previewModeToggle, this.e.markupAlignRadios);
     let label, svg;
     switch(this.previewMode){
     case 0:
@@ -427,11 +426,11 @@
         P.renderPreview();
       };
     }
     D.disable(fp.toDisable, this.e.previewModeToggle, this.e.markupAlignRadios);
     D.addClass(this.e.markupAlignWrapper, 'hidden');
-    D.addClass(this.e.previewCopyButton, 'disabled');
+    this.e.previewCopyButton.disabled = true;
     const content = this.e.taContent.value.trim();
     this.response.raw = this.response.rawSvg = undefined;
     this.response.inputText = content;
     const sampleScript = fp.$_sampleScript;
     delete fp.$_sampleScript;

Index: src/fossil.page.pikchrshowasm.js
==================================================================
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -312,11 +312,10 @@
       if(this.e.pikOut.dataset.pikchr){
         this.render(this.e.pikOut.dataset.pikchr);
       }
     }.bind(PS));
     F.copyButton(PS.e.previewCopyButton, {copyFromElement: PS.e.outText});
-    PS.e.previewModeLabel.addEventListener('click', ()=>PS.e.previewCopyButton.click(), false);
 
     PS.addMsgHandler('working',function f(ev){
       switch(ev.data){
           case 'start': /* See notes in preStartWork(). */; return;
           case 'end':

Index: src/fossil.page.wikiedit.js
==================================================================
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -1234,13 +1234,13 @@
           encodeURIComponent(a.filename)
         ].join(''),
         "raw/"+a.src
       ].forEach(function(url){
         const imgUrl = D.append(D.addClass(D.span(), 'monospace'), url);
-        const urlCopy = D.span();
+        const urlCopy = D.button();
         const li = D.li(ul);
-        D.append(li, urlCopy, " ", imgUrl);
+        D.append(li, urlCopy, imgUrl);
         F.copyButton(urlCopy, {copyFromElement: imgUrl});
       });
     });
     return this;
   };

Index: src/pikchrshow.c
==================================================================
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -462,12 +462,12 @@
       } CX("</fieldset><!-- .zone-wrapper.input -->");
       CX("<fieldset class='zone-wrapper output'>"); {
         CX("<legend><div class='button-bar'>");
           CX("<button id='btn-render-mode'>Render Mode</button> ");
           CX("<span style='white-space:nowrap'>"
-             "<span id='preview-copy-button' "
-             "title='Tap to copy to clipboard.'></span>"
+             "<button id='preview-copy-button' "
+             "title='Tap to copy to clipboard.'><span></span></button>"
              "<label for='preview-copy-button' "
              "title='Tap to copy to clipboard.'></label>"
              "</span>");
         CX("</div></legend>");
         CX("<div id='pikchr-output-wrapper'>");

Index: src/style.c
==================================================================
--- src/style.c
+++ src/style.c
@@ -478,11 +478,11 @@
 /*
 ** Output TEXT with a click-to-copy button next to it. Loads the copybtn.js
 ** Javascript module, and generates HTML elements with the following IDs:
 **
 **    TARGETID:       The <span> wrapper around TEXT.
-**    copy-TARGETID:  The <span> for the copy button.
+**    copy-TARGETID:  The <button> for the copy button.
 **
 ** If the FLIPPED argument is non-zero, the copy button is displayed after TEXT.
 **
 ** The COPYLENGTH argument defines the length of the substring of TEXT copied to
 ** clipboard:
@@ -510,18 +510,20 @@
   if( cchLength==1 ) cchLength = hash_digits(0);
   else if( cchLength==2 ) cchLength = hash_digits(1);
   if( !bFlipped ){
     const char *zBtnFmt =
       "<span class=\"nobr\">"
-      "<span "
-      "class=\"copy-button\" "
-      "id=\"copy-%h\" "
-      "data-copytarget=\"%h\" "
-      "data-copylength=\"%d\">"
-      "</span>"
+      "<button "
+          "class=\"copy-button\" "
+          "id=\"copy-%h\" "
+          "data-copytarget=\"%h\" "
+          "data-copylength=\"%d\">"
+        "<span>"
+        "</span>"
+      "</button>"
       "<span id=\"%h\">"
-      "%s"
+        "%s"
       "</span>"
       "</span>";
     if( bOutputCGI ){
       cgi_printf(
                   zBtnFmt/*works-like:"%h%h%d%h%s"*/,
@@ -533,18 +535,20 @@
     }
   }else{
     const char *zBtnFmt =
       "<span class=\"nobr\">"
       "<span id=\"%h\">"
-      "%s"
-      "</span>"
-      "<span "
-      "class=\"copy-button copy-button-flipped\" "
-      "id=\"copy-%h\" "
-      "data-copytarget=\"%h\" "
-      "data-copylength=\"%d\">"
-      "</span>"
+        "%s"
+      "</span>"
+      "<button "
+          "class=\"copy-button copy-button-flipped\" "
+          "id=\"copy-%h\" "
+          "data-copytarget=\"%h\" "
+          "data-copylength=\"%d\">"
+        "<span>"
+        "</span>"
+      "</button>"
       "</span>";
     if( bOutputCGI ){
       cgi_printf(
                   zBtnFmt/*works-like:"%h%s%h%h%d"*/,
                   zTargetId,zText,zTargetId,zTargetId,cchLength);