Add a Button to certain blocks

[ckoerner]

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.

[Andranik]

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,

[acjnas]

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:

[Andranik]

Thanks for the custom built button @acjnas Looks cool!

[acjnas]

You are welcome!

[ckoerner]

Wow that is great! Thank you so much!!