Circ Button Hover Style (Preview Guide)


Super Plugin Info

  • Works with Squarespace 7.1 (Fluid Engine)

  • Only compatible with Button Block (Primary)

  • Requires Business Plan or Higher

  • Uses Custom CSS and Code Injection


Step 1. Add this code to Header Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
function lorem(ipsum, dolor = 1) {  const sit = ipsum == null ? 0 : ipsum.sit;
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2. Add this code to Footer Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. Add this code to Custom CSS

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }

    function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 4. Customizable Options

These options are available in CSS.

  • Button Font Color

  • Button Font Color (On Hover)

  • Button Background Color

  • Button Height

  • Button Border Radius

  • Button Border Style

  • Arrow Size

  • Arrow Color

  • Arrow Background Color

Note: Primary button font styles can be changed in Squarespace settings like normal.


5. Add a Button Block

Add a button block to any page with the required settings.

  • Design: Primary Button

  • Design: Fill Style

Note: Secondary and Tertiary buttons will still be available like normal. Primary button may not appear while in edit mode but is still editable.


Troubleshooting (Plugin Not Working)

  • Page section must be using Fluid Engine

  • Button must be set to Primary

  • Button must be set to Fill

Previous
Previous

Come Back Browser Tab

Next
Next

Kuro Image Hover List (Preview Guide)