Change Button hover effect on the broadcast theme

Store Design
, , , , , , , , , , , , ,
4

Hello, I checked your store and it seems there has been a change in the button class. I will show you the easiest way.
Follow the instructions and find the theme.liquid file. Then replace the code I provided earlier with the following code:

<script>
// Create a new anchor element
var newElement = document.createElement('a');

// Set the class for the new element
newElement.className = 'Button Button__dark';
newElement.style.backgroundColor = ''; // Set your desired background color
newElement.style.color = ''; // Set your desired text color

// Set other attributes for the new element
newElement.href = '#!';
newElement.id = '';
newElement.onclick = '';
newElement.tabIndex = '0';
newElement.setAttribute('data-mode', 'default');

// Add text content and spans for the new element
newElement.innerHTML = `
    LEARN MORE
    
    <span data-index="1" class="Button-hover-helper"></span>
    <span data-index="2" class="Button-hover-helper"></span>
    <span data-index="3" class="Button-hover-helper"></span>
    <span data-index="4" class="Button-hover-helper"></span>
    
    <span data-index="1" class="Button-hover-content" data-mode="default" aria-hidden="true">LEARN MORE</span>
    <span data-index="2" class="Button-hover-content" data-mode="default" aria-hidden="true">LEARN MORE</span>
    <span data-index="3" class="Button-hover-content" data-mode="default" aria-hidden="true">LEARN MORE</span>
    <span data-index="4" class="Button-hover-content" data-mode="default" aria-hidden="true">LEARN MORE</span>
`;

// Replace the original element with the new element
var originalElement = document.querySelector('.standard__cta.btn.hero__btn');
originalElement.parentNode.replaceChild(newElement, originalElement);
</script>
<style>
.Button-hover-helper {
    border-radius: 40px;
    -webkit-clip-path: var(--clip);
    clip-path: var(--clip);
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--base-color);
}
.Button__dark {
    --base-color: #67645e;
    color: var(--base-color);
    box-shadow: inset 0 0 0 1px var(--base-color);
}
.Button {
    --base-color: #fff;
    --label-color: #fff;
    --base-spacing: .3rem 1.9rem .2rem;
    font-size: max(.875rem + .2vw,.925vw)!important;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    text-transform: uppercase;
    padding: var(--base-spacing);
    border-radius: 40px;
    color: var(--label-color);
    box-shadow: inset 0 0 0 1px #fff;
    text-decoration: none;
    border: none;
    line-height: 150%;
    background: transparent;
    position: relative;
    outline: none!important;
}

.Button-hover-helper[data-index="1"] {
    --clip: polygon(0 0, 100% 0, 50% 50%, 50% 50%);
}

.Button-hover-content {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-clip-path: var(--clip);
    clip-path: var(--clip);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--base-color);
    color: #84827e;
    left: 50%;
    position: absolute;
    top: 50%;
    transition: -webkit-clip-path .25s ease;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    text-align: center;
    padding: var(--base-spacing);
    border: none;
}

.Button-hover-helper[data-index="2"] {
    --clip: polygon(100% 0, 100% 100%, 50% 50%);
}
.Button-hover-helper[data-index="3"] {
    --clip: polygon(0 100%, 100% 100%, 50% 50%);
}
.Button-hover-helper[data-index="4"] {
    --clip: polygon(0 0, 0 100%, 50% 50%);
}

.Button-hover-content[data-index="1"] {
    --clip: inset(0 0 100% 0);
}

.Button-hover-content[data-index="2"] {
    --clip: inset(0 0 0 100%);
}

.Button-hover-content[data-index="3"] {
    --clip: inset(100% 0 0 0);
}
.Button-hover-content[data-index="4"] {
    --clip: inset(0 100% 0 0);
}
.Button-hover-helper[data-index="1"]:hover, .Button-hover-helper[data-index="2"]:hover, .Button-hover-helper[data-index="3"]:hover, .Button-hover-helper[data-index="4"]:hover {
    --clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    z-index: 2;
}

.Button-hover-helper[data-index="1"]:hover~.Button-hover-content[data-index="1"], .Button-hover-helper[data-index="2"]:hover~.Button-hover-content[data-index="2"], .Button-hover-helper[data-index="3"]:hover~.Button-hover-content[data-index="3"], .Button-hover-helper[data-index="4"]:hover~.Button-hover-content[data-index="4"] {
    --clip: inset(0 0 0 0);
    z-index: 0;
    line-height: 1.4rem;
}

</style>

If they still don’t work, please take a screenshot of the file name you edited as well as the code you pasted.