I am trying to implement custom button styles on my website from https://cssbuttons.io/detail/cssbuttons-io/brown-otter-21.

The "button" is contained in this HTML on the website:

<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>

I have added the CSS from the button styles in the link above, as well as this JS to try to implement the HTML set up they have:

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.");
});

The a element is not getting changed, and the message does not load in console on the website.

I have put all the code into JSFiddle here: https://jsfiddle.net/aliyaconrad/oc273g4u/4/

Any insight as to why this code might not be working would be much appreciated!