Change Button hover effect on the broadcast theme

Change Button hover effect on the broadcast theme

DAZESKINCARE
New Member
12 0 0

Hey, I really love this theme I bought(the broadcast theme), but I dislike the hover effect of the buttons, does anyone know how to make the button hover effect go like the buttons on this site?: rhodeskin.com 

thanks in advance for all of your help!!!

my theme is broadcast

this is my link: https://d6698b-3.myshopify.com/ and my password is mohwhi

Replies 4 (4)

BSS-Commerce
Shopify Partner
3477 464 551

Hi @DAZESKINCARE ,

Hello, to customize button effects like in the sample website, you need to process each button in your store because each button will include many child elements.
Here I will guide you to customize a button template:
1. Access your Shopify admin page, select the theme you are using, and click Edit code:

view - 2024-01-08T163049.557.png

2. In the code folder, find the theme.liquid file and add the following code before the </html> tag

view - 2024-01-08T163126.052.png

<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.btn--outline.btn--primary.hero__btn');
originalElement.parentNode.replaceChild(newElement, originalElement);
</script>

3. Then continue to find the theme.css.liquid file and add the following code to the last part of the file:

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

Here is the result: https://drive.google.com/file/d/1nj3AvV7Ocgf3On4NLtUnO5Ztn3rgqMu7/view?usp=sharing

Hope it helps @DAZESKINCARE 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
DAZESKINCARE
New Member
12 0 0

Hey! thanks for replying but it does not work! Do you maybe have something else or can you help me install it?

BSS-Commerce
Shopify Partner
3477 464 551

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
DAZESKINCARE
New Member
12 0 0

Hey, still does not work unfortunately, probably because I don't have a theme.css.liquid file

Image 14-01-2024 at 12.10.jpeg