Shopify themes, liquid, logos, and UX
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
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:
2. In the code folder, find the theme.liquid file and add the following code before the </html> tag
<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
Hey! thanks for replying but it does not work! Do you maybe have something else or can you help me install it?
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
Hey, still does not work unfortunately, probably because I don't have a theme.css.liquid file
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025