Estoy tratando de implementar estilos de botones personalizados en mi sitio web desde https://cssbuttons.io/detail/cssbuttons-io/brown-otter-21 .

El "botón" está contenido en este HTML en el sitio web:

 <div class="et_pb_button_module_wrapper et_pb_button_3_wrapper et_pb_module "> <a id="fancy" class="et_pb_button et_pb_button_3 fancy et_pb_bg_layout_light" href="">VIEW MORE</a> </div>

He agregado el CSS de los estilos de botón en el enlace de arriba, así como este JS para intentar implementar la configuración de HTML que tienen:

 document.addEventListener("DOMContentLoaded", function(event) { var button = document.getElementsByClassName('fancy'); var buttonText = button.innerHTML; button.innerHTML = ` <span class="top-key"></span> <span class="text">${buttonText}</span> <span class="bottom-key-1"></span> <span class="bottom-key-2"></span> `; console.log("Button JS Loaded."); });

El elemento a no se modifica y el mensaje no se carga en la consola del sitio web.

He puesto todo el código en JSFiddle aquí: https://jsfiddle.net/aliyaconrad/oc273g4u/4/

Cualquier idea de por qué este código podría no estar funcionando sería muy apreciada.