Hey, I am using this Feature block (Feature with right side picture) below but would like to have a Button instead of the ‘learn more’ link…
Can this be added somehow?
thanks.
Hey, I am using this Feature block (Feature with right side picture) below but would like to have a Button instead of the ‘learn more’ link…
Can this be added somehow?
thanks.
Hello @ckoerner Thanks a lot for reaching out, unfortunately adding a button instead of the link won’t be possible for this exact block, however I will be more than glad to add this as a new feature request.
Best regards,
Sure, let me help you with that:
If the link text still reads ‘LEARN MORE’ you can copy and paste this snippet of code into the custom code section of your page:
If it does not read ‘LEARN MORE’ then update line 14 on this script:
<script>
setTimeout(function() {
// Get all the links on the page
var links = document.getElementsByTagName('a');
// Iterate through the links
for (var i = 0; i < links.length; i++) {
// Check if the link's inner text is 'LEARN MORE'
if (links[i].innerText === 'LEARN MORE') {
// Create a button element
var button = document.createElement('button');
// Set the button text
button.textContent = 'LEARN MORE';
// Apply styling to the button
button.style.display = 'inline-block';
button.style.padding = '10px 20px';
button.style.backgroundColor = '#007bff';
button.style.color = '#ffffff';
button.style.textDecoration = 'none';
button.style.border = 'none';
button.style.borderRadius = '25px';
button.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
button.style.cursor = 'pointer';
button.style.transition = 'transform 0.2s ease, box-shadow 0.2s ease';
// Add hover effect for the button
button.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-2px)';
this.style.boxShadow = '0 6px 12px rgba(0, 0, 0, 0.2)';
});
button.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
this.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
});
// Replace the link with the button
links[i].parentNode.replaceChild(button, links[i]);
}
}
}, 500); // 500ms delay
</script>
If you need further customization you can contact me.
Here is how it looks:
Thanks for the custom built button @acjnas Looks cool!
You are welcome!
Wow that is great! Thank you so much!!