Description
- adding parallelogram button
- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. You can use this code to Code Injection > Footer
- If you use Personal/Basic Plan and your plan doesn’t support Injection, you can see #3.1
<!-- 07.26c30v7 Parallelogram button -->
<script>
window.parallelogramSettings = {
skewAngle: "-20deg",
shadowBgColor: "rgba(0, 0, 0, 0.2)",
shadowOffsetX: "-8px",
shadowOffsetY: "8px",
hoverOffsetX: "-4px",
hoverOffsetY: "4px",
transitionSpeed: "0.3s"
};
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const config = window.parallelogramSettings || {};
const skewAngle = config.skewAngle || "-20deg";
const shadowBgColor = config.shadowBgColor || "rgba(0, 0, 0, 0.2)";
const shadowOffsetX = config.shadowOffsetX || "-8px";
const shadowOffsetY = config.shadowOffsetY || "8px";
const hoverOffsetX = config.hoverOffsetX || "-4px";
const hoverOffsetY = config.hoverOffsetY || "4px";
const transitionSpeed = config.transitionSpeed || "0.3s";
const baseClasses = [
'.sqs-button-element--primary',
'.sqs-button-element--secondary',
'.sqs-button-element--tertiary',
'.newsletter-block .newsletter-form-button',
'.form-block .form-submit-button',
'.header-actions-action--cta .btn'
];
const targetSelectors = baseClasses.map(cls => `html body ${cls}.is-parallelogram`).join(',\n');
const childSelectors = baseClasses.map(cls => `html body ${cls}.is-parallelogram *`).join(',\n');
const beforeSelectors = baseClasses.map(cls => `html body ${cls}.is-parallelogram::before`).join(',\n');
const afterSelectors = baseClasses.map(cls => `html body ${cls}.is-parallelogram::after`).join(',\n');
const hoverBeforeSelectors = baseClasses.map(cls => `html body ${cls}.is-parallelogram:hover::before`).join(',\n');
const style = document.createElement('style');
style.innerHTML = `
html body .newsletter-form-button-wrapper,
html body .submit-wrapper,
html body .form-button-wrapper,
html body .sqs-block-button-container {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
${targetSelectors} {
position: relative !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
color: var(--native-text) !important;
z-index: 1 !important;
overflow: visible !important;
border-radius: 0 !important;
--primaryButtonBackgroundColor: transparent !important;
--secondaryButtonBackgroundColor: transparent !important;
--tertiaryButtonBackgroundColor: transparent !important;
--solidButtonBackgroundColor: transparent !important;
}
${childSelectors} {
color: var(--native-text) !important;
z-index: 2 !important;
position: relative !important;
background: transparent !important;
background-color: transparent !important;
border-color: transparent !important;
}
${beforeSelectors} {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: var(--native-bg) !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
transform: skewX(${skewAngle}) !important;
z-index: -1 !important;
transition: transform ${transitionSpeed} ease !important;
border-radius: 0 !important;
display: block !important;
}
${afterSelectors} {
content: '' !important;
position: absolute !important;
top: ${shadowOffsetY} !important;
left: ${shadowOffsetX} !important;
width: 100% !important;
height: 100% !important;
background-color: ${shadowBgColor} !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
transform: skewX(${skewAngle}) !important;
z-index: -2 !important;
transition: transform ${transitionSpeed} ease !important;
border-radius: 0 !important;
display: block !important;
}
${hoverBeforeSelectors} {
transform: skewX(${skewAngle}) translate(${hoverOffsetX}, ${hoverOffsetY}) !important;
}
`;
document.head.appendChild(style);
function applyNativeStyles() {
const buttons = document.querySelectorAll(baseClasses.join(', '));
buttons.forEach(btn => {
if (!btn.classList.contains('is-parallelogram')) {
const computed = window.getComputedStyle(btn);
const bgColor = computed.backgroundColor;
const txtColor = computed.color;
btn.style.setProperty('--native-bg', bgColor);
btn.style.setProperty('--native-text', txtColor);
btn.classList.add('is-parallelogram');
}
});
}
applyNativeStyles();
setTimeout(applyNativeStyles, 500);
setTimeout(applyNativeStyles, 1500);
});
</script>
#1.2. You can adjust button style here (Line 04 – Line 09)
skewAngle: "-20deg", shadowBgColor: "rgba(0, 0, 0, 0.2)", shadowOffsetX: "-8px", shadowOffsetY: "8px", hoverOffsetX: "-4px", hoverOffsetY: "4px",
#1.3. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)
#2. Customize
nothing now
#3. Other
#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer > Add a Markdown Block
Add this code into Markdown
<script>
window.parallelogramSettings = {
skewAngle: "-20deg",
shadowBgColor: "rgba(0, 0, 0, 0.2)",
shadowOffsetX: "-8px",
shadowOffsetY: "8px",
hoverOffsetX: "-4px",
hoverOffsetY: "4px",
transitionSpeed: "0.3s"
};
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const config = window.parallelogramSettings || {};
const skewAngle = config.skewAngle || "-20deg";
const shadowBgColor = config.shadowBgColor || "rgba(0, 0, 0, 0.2)";
const shadowOffsetX = config.shadowOffsetX || "-8px";
const shadowOffsetY = config.shadowOffsetY || "8px";
const hoverOffsetX = config.hoverOffsetX || "-4px";
const hoverOffsetY = config.hoverOffsetY || "4px";
const transitionSpeed = config.transitionSpeed || "0.3s";
const baseClasses = [
'.sqs-button-element--primary',
'.sqs-button-element--secondary',
'.sqs-button-element--tertiary',
'.newsletter-block .newsletter-form-button',
'.form-block .form-submit-button',
'.header-actions-action--cta .btn'
];
const targetSelectors = baseClasses.map(cls => `html body ${cls}.is-parallelogram`).join(',\n');
const childSelectors = baseClasses.map(cls => `html body ${cls}.is-parallelogram *`).join(',\n');
const beforeSelectors = baseClasses.map(cls => `html body ${cls}.is-parallelogram::before`).join(',\n');
const afterSelectors = baseClasses.map(cls => `html body ${cls}.is-parallelogram::after`).join(',\n');
const hoverBeforeSelectors = baseClasses.map(cls => `html body ${cls}.is-parallelogram:hover::before`).join(',\n');
const style = document.createElement('style');
style.innerHTML = `
html body .newsletter-form-button-wrapper,
html body .submit-wrapper,
html body .form-button-wrapper,
html body .sqs-block-button-container {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
${targetSelectors} {
position: relative !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
color: var(--native-text) !important;
z-index: 1 !important;
overflow: visible !important;
border-radius: 0 !important;
--primaryButtonBackgroundColor: transparent !important;
--secondaryButtonBackgroundColor: transparent !important;
--tertiaryButtonBackgroundColor: transparent !important;
--solidButtonBackgroundColor: transparent !important;
}
${childSelectors} {
color: var(--native-text) !important;
z-index: 2 !important;
position: relative !important;
background: transparent !important;
background-color: transparent !important;
border-color: transparent !important;
}
${beforeSelectors} {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: var(--native-bg) !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
transform: skewX(${skewAngle}) !important;
z-index: -1 !important;
transition: transform ${transitionSpeed} ease !important;
border-radius: 0 !important;
display: block !important;
}
${afterSelectors} {
content: '' !important;
position: absolute !important;
top: ${shadowOffsetY} !important;
left: ${shadowOffsetX} !important;
width: 100% !important;
height: 100% !important;
background-color: ${shadowBgColor} !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
transform: skewX(${skewAngle}) !important;
z-index: -2 !important;
transition: transform ${transitionSpeed} ease !important;
border-radius: 0 !important;
display: block !important;
}
${hoverBeforeSelectors} {
transform: skewX(${skewAngle}) translate(${hoverOffsetX}, ${hoverOffsetY}) !important;
}
`;
document.head.appendChild(style);
function applyNativeStyles() {
const buttons = document.querySelectorAll(baseClasses.join(', '));
buttons.forEach(btn => {
if (!btn.classList.contains('is-parallelogram')) {
const computed = window.getComputedStyle(btn);
const bgColor = computed.backgroundColor;
const txtColor = computed.color;
btn.style.setProperty('--native-bg', bgColor);
btn.style.setProperty('--native-text', txtColor);
btn.classList.add('is-parallelogram');
}
});
}
applyNativeStyles();
setTimeout(applyNativeStyles, 500);
setTimeout(applyNativeStyles, 1500);
});
</script>
