ANI Button Block
Look Demo
Add this one of a kind animation to any button block. This plugin uses css editor and works with all template familes.
How To Install
Edit any page and add a button block of any size. Copy and paste the code below within the ‘text’ field of the button block settings.
<i>L</i><i>e</i><i>a</i><i>r</i><i>n</i> <i>M</i><i>o</i><i>r</i><i>e</i>
This code above displays ‘Learn More’ within the button, but you’re free to change this to whatever you’d like.
To do so, replace the letters between each set of <i></i> tags. If your button requires longer or shorter wording, simply add or remove a set of tags. For example, <i>T</i><i>H</i><i>I</i><i>S</i> spells THIS.
After saving your button block settings and page, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.
/* = = ANI BUTTON BLOCK = = */
// — — DEFAULT — — //
@text-color-hover: hsl(0, 0%, 100%);
@text-line-height: 1em;
@text-fade-out: .4s;
@text-fade-in: .8s;
@text-shift: .8s;
@text-shift-delay: 25ms;
@background-transition: .8s;
// Rounded Shape
@corner-rounding: 3px;
@corner-rounding-hover: @corner-rounding;
// Solid & Outline Styles
@hover-opacity: 1;
@active-opacity: .9;
// — — END STYLE — — //
body[class*="button"] {
.sqs-block-button .sqs-block-button-element {
overflow: hidden;
vertical-align: top;
transition: background @background-transition cubic-bezier(.165,.84,.44,1), border-radius @background-transition cubic-bezier(.165,.84,.44,1) !important;
user-select: none;
i {
font-style: normal;
display: inline-block;
text-shadow: 0 @text-line-height 0 transparent;
transition: color @text-fade-in cubic-bezier(.165,.84,.44,1), text-shadow @text-fade-out cubic-bezier(.165,.84,.44,1), transform @text-shift cubic-bezier(.165,.84,.44,1);
.delay (@i) when (@i > 0) {
&:nth-child(@{i}) {
transition-delay: @text-shift-delay * (@i - 1);
}
.delay(@i - 1);
}
.delay(64);
}
&:hover {
i {
color: transparent;
text-shadow: 0 @text-line-height 0 @text-color-hover;
transform: translateY(-@text-line-height);
transition: color @text-fade-out cubic-bezier(.165,.84,.44,1), text-shadow @text-fade-in cubic-bezier(.165,.84,.44,1), transform @text-shift cubic-bezier(.165,.84,.44,1);
.delayHover (@i) when (@i > 0) {
&:nth-last-child(@{i}) {
transition-delay: @text-shift-delay * (@i - 1);
}
.delayHover(@i - 1);
}
.delayHover(64);
}
}
}
// Rounded Shape
&.large-button-shape-rounded .sqs-block-button .sqs-block-button-element--large,
&.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium,
&.small-button-shape-rounded .sqs-block-button .sqs-block-button-element--small {
border-radius: @corner-rounding;
&:hover {
border-radius: @corner-rounding-hover;
}
}
// Solid & Outline Styles
&:not(.large-button-style-raised) .sqs-block-button .sqs-block-button-element--large,
&:not(.medium-button-style-raised) .sqs-block-button .sqs-block-button-element--medium,
&:not(.small-button-style-raised) .sqs-block-button .sqs-block-button-element--small {
&:hover {
opacity: @hover-opacity;
}
&:active {
opacity: @active-opacity;
}
}
}
/*
ANI Button Block by ANIagency LLC
For personal and professional use only. Cannot be redistributed or sold.
v1.07
*/Customize
Customize
At the top of the plugin code, you’ll see the variables listed below, followed by a value. Feel free to change these to your liking, or try one of our styles in the section below.
@text-color-hover
Changes the color of the text when hovered. We recommend using the same value as the Button Text Color within your Site Styles.
@text-line-height
The vertical distance between the top and bottom text.
@text-fade-out
How long it takes for the text to fade out.
@text-fade-in
How long it takes for the text to fade in.
@text-shift
How long it takes the text to move vertically to its endpoint.
@text-shift-delay
How much additional time it takes for the following character to begin its transition.
@background-transition
How long it takes for the background color to change.
@corner-rounding
Button corner rounding. Squarespace’s default value for rounded buttons is 3px.
@corner-rounding-hover
Button corner rounding when hovering.
@hover-opacity
Defines the transparency when hovering.
@active-opacity
Defines the transparency when clicking.
Styles
We use LESS CSS variables to store values at the top of our Squarespace plugins. This not only allows us to make quick and easy customizations, but also lets us save and share multiple styles. We’ve created 4 different styles for you to try out.
To try them out, copy and replace the LESS comment starting from the very top of the plugin code to the // — — END STYLE — — // comment with any of the styles below.
// — — DEFAULT REVERSED — — // @text-color-hover: hsl(0, 0%, 100%); @text-line-height: -1em; @text-fade-out: .4s; @text-fade-in: .8s; @text-shift: .8s; @text-shift-delay: 25ms; @background-transition: .8s; // Rounded Shape @corner-rounding: 3px; @corner-rounding-hover: @corner-rounding; // Solid & Outline Styles @hover-opacity: 1; @active-opacity: .9; // — — END STYLE — — //
// — — SLIDE UP — — // @text-color-hover: hsl(0, 0%, 100%); @text-line-height: 1em; @text-fade-out: .4s; @text-fade-in: .8s; @text-shift: .8s; @text-shift-delay: 0; @background-transition: .8s; // Rounded Shape @corner-rounding: 3px; @corner-rounding-hover: @corner-rounding; // Solid & Outline Styles @hover-opacity: 1; @active-opacity: .9; // — — END STYLE — — //
// — — SLIDE DOWN — — // @text-color-hover: hsl(0, 0%, 100%); @text-line-height: -1em; @text-fade-out: .4s; @text-fade-in: .8s; @text-shift: .8s; @text-shift-delay: 0; @background-transition: .8s; // Rounded Shape @corner-rounding: 3px; @corner-rounding-hover: @corner-rounding; // Solid & Outline Styles @hover-opacity: 1; @active-opacity: .9; // — — END STYLE — — //
License
This plugin comes with an Unlimited Use License. View License Terms