Buy me a coffee

How to add a Second Button to Squarespace Header

To add a Second Button to Squarespace Header, you can use these code.

#1. Use this code to Code Injection > Footer. You can change text/URL in the code (red arrow)

<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--secondary second-button" href="https://google.com">Contact</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('a.second-button').insertAfter('a.btn');
});
</script>

Add Second Button 01 Min

#2. Use this code to Custom CSS box

a.second-button {
    display: none;
}
header#header a.second-button {
    margin-left: 1.2vw;
    display: inline-block !important;
}

Add Second Button 02 Min

#3. Result

Add Second Button 03 Min

#4. This button will be inherit the Secondary Button Style, so you can adjust the style in Site Styles.

Add Second Button 04 Min

Add Second Button 05 Min