Creating a looping underline on hover for button blocks in Squarespace (7.0 & 7.1)
We haven’t really covered a lot of button customizations on the blog, so I thought I’d share one with you today!
The final effect makes it seem like the underline loops around the button, so it’s a pretty cool effect.
The code isn’t too complicated AND is flexible enough to allow you to target one particular button size or all at the same time.
Just keep in mind that we’re working with Squarespace’s Button Block, so the code won’t work right off the bat for those buttons within Image Blocks, Newsletter Blocks, or any other kind of block.
You can find the code for this tutorial here: https://beatrizcaraballo.com/blog/loo...
-----------------------
//Timestamps
00:00 - Intro
00:23 - Initial setup
01:04 - Fixing button padding
03:08 - Adding the underline
08:11 - Creating the hover mode
-----------------------
//Helpful links
⇝ Find the code you need amongst hundreds of Squarespace tutorials and snippets: https://beatrizcaraballo.com/codebase
⇝ Receive new Squarespace CSS tricks and exclusive offers on an often-ish basis: https://beatrizcaraballo.com/vip
⇝ Get in touch: https://beatrizcaraballo.com/contact