(Squarespace) How to target single letter of a Button

To target single letter of a Button, for example this letter “P”.

#1. First, use this code to Code Injection > Footer. This code will wrap letter “P” inside a tag.
If code doesn’t work, you can comment below, message or email me.

<script>
const buttons = document.querySelectorAll('div.button-block a');
buttons.forEach(button => {
  const text = button.textContent;
  const regex = /P/g;
  const newText = text.replace(regex, '<span class="style-letter">P</span>');
  button.innerHTML = newText;
});
</script>

#2. Now, you can use CSS code like this to Custom CSS to make style for “P”

span.style-letter {
    padding-left: 5px;
    color: #f1f;
    font-size: 30px;
}

#3. Result

1 Like