Using CSS to Add Custom Buttons to Squarespace | AJM Learn
Original post:
https://ajmexperience.com/learn-posts...
For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn
Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...
Get our full CSS Library:
https://www.ajmexperience.com/squares...
——————
HERE'S THE CODE:
// HOVER FILL EFFECT //
.sqs-block-button .sqs-block-button-element--small {
border: solid 2px #4ECDC4;
background-color: transparent !important;
color: #4ECDC4 !important;
border-radius: 10px !important;
transition: all ease-in-out 700ms !important;
-webkit-transition: all ease-in-out 700ms !important;
-moz-transition: all ease-in-out 700ms !important;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4ECDC4 50%) !important;
}
.sqs-block-button .sqs-block-button-element--small:hover {
color: #fff !important;
background-position: 0 100% !important;
}
// DROP SHADOW ON HOVER //
.sqs-block-button-element:hover {box-shadow: 0px 2px 5px rgba(0,0,0,.3)}
// CHANGE COLOR ON HOVER //
.sqs-block-button-element:hover {background-color: #f6c03c; color: #000000}
// GRADIENT BUTTONS //
.sqs-block-button .sqs-block-button-element--small {
background-image: linear-gradient(to right, #12c47a, #367d86) !important;
}
// CHANGE THE COLOR OF ONE BUTTON //
Replace BLOCK-ID-HERE (maintain the hashtag) with the correct block ID for the button you’d like to change (I recommend this Chrome Extension for finding block IDs super quickly).
#BLOCK-ID-HERE
.sqs-block-button-element--small {
border: solid 2px #000000;
color: #000000 !important;
}
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.