Bottom to Top Fill on Hover
/* Line fills button on hover - works best on solid fill button */
.sqs-block-button-element--medium {
border-bottom: 2px solid #89a699 !important;
background: transparent !important;
transform: perspective (0px);
color: #89a699 !important;
transition: 0.4s;
}
.sqs-block-button-element--medium:before {
content: "";
position: absolute; top:0; right:0; bottom:0; left:0;
z-index: -1;
background: #89a699 !important;
transform: scaleY(0);
transform-origin: 50% 100%;
transition: 0.4s;
}
.sqs-block-button-element--medium:hover {
color: white !important;
border-bottom: 2px solid #89a699 !important;
opacity: 1;
transition: 0.4s;
}
.sqs-block-button-element--medium:hover:before {
transform: scaleY(1);
}
.header-actions-action .btn{
background-color: #925650!important;
}
Used On Charleston Template - This code works best
Bottom to Top Fill on Hover
/* Line fills button on hover - works best on solid fill button */
.sqs-block-button-element--medium {
border-bottom: 2px solid #000000 !important;
transform: perspective (0px);
}
.sqs-block-button-element--medium:before {
content: "";
position: absolute; top:0; right:0; bottom:0; left:0;
z-index: -1;
background: #a97d6e;
transform: scaleY(0);
transform-origin: 50% 100%;
transition: 0.4s;
}
.sqs-block-button-element--medium:hover {
color: white !important;
border-bottom: 2px solid #a97d6e !important;
opacity: 1;
transition: 0.4s;
}
.sqs-block-button-element--medium:hover:before {
transform: scaleY(1);
}
.header-actions-action .btn{
background-color: #925650!important;
}
https://forum.squarespace.com/topic/242566-creating-custom-buttons-with-css-everything-went-wrong/
Mariner Style Arrow Button
/**
* Tertiary Button Style
* From Will-Myers.com
**/
#siteWrapper .sqs-button-element--tertiary {
--line-size:120%;
--arrow-size:100%;
--speed: .3s;
--offset:-17px;
--thickness: 3px;
--color: #26A69A;
position:relative;
background: unset;
padding:0px !important;
justify-content:flex-start;
cursor: pointer;
&:before, &:after {
content:'';
position:absolute;
width:var(--thickness);
box-sizing:border-box;
border-radius: 0px 0px 0px 0px;
right:var(--offset);
height: ~'calc(var(--line-size) / 2)';
background: var(--color);
transition: transform var(--speed) ease, height var(--speed) ease, top var(--speed) ease;
}
&:after {
top:~'calc((100% - var(--line-size)) / 2 )';
transform-origin: bottom right;
will-change: transform, top;
}
&:before {
bottom: ~'calc(((100% - var(--line-size)) / 2 ) + 1px)';
transform-origin: top right;
will-change: transform, bottom;
}
&:hover:after,
&:hover:before {
height: ~'calc(var(--arrow-size) / 2)';
}
&:hover:after {
border-radius: 1px 1px 0px 0px;
top: ~'calc((100% - var(--arrow-size)) /2 )';
transform: rotate(-45deg);
}
&:hover:before {
border-radius: 0px 0px 1px 1px;
bottom: ~'calc((100% - var(--arrow-size)) /2 )';
transform: rotate(45deg);
}
}
https://www.will-myers.com/articles/mariners-button-style
Square to Pill Button
// Square To Pill Button //
.sqs-block-button .sqs-block-button-element--large .sqs-block-button-element--medium .sqs-block-button-element--small{
border-radius: 0px;
-webkit-transition: ease-in-out 0.5s !important;
-moz-transition: ease-in-out 0.5s !important;
-ms-transition: ease-in-out 0.5s !important;
-o-transition: ease-in-out 0.5s !important;
transition: ease-in-out 0.5s !important;
}
.sqs-block-button .sqs-block-button-element--large:hover, .sqs-block-button-element--medium:hover, .sqs-block-button-element--small:hover{
border-radius: 50px;
-webkit-transition: ease-in-out 0.5s !important;
-moz-transition: ease-in-out 0.5s !important;
-ms-transition: ease-in-out 0.5s !important;
-o-transition: ease-in-out 0.5s !important;
transition: ease-in-out 0.5s !important;
}
.header-actions .btn:hover {
border-radius: 0px;
-webkit-transition: ease-in-out 0.5s !important;
-moz-transition: ease-in-out 0.5s !important;
-ms-transition: ease-in-out 0.5s !important;
-o-transition: ease-in-out 0.5s !important;
transition: ease-in-out 0.5s !important;
}
.header-actions .btn:hover{
border-radius: 50px;
-webkit-transition: ease-in-out 0.5s !important;
-moz-transition: ease-in-out 0.5s !important;
-ms-transition: ease-in-out 0.5s !important;
-o-transition: ease-in-out 0.5s !important;
transition: ease-in-out 0.5s !important;
}
Box Shadow
//** BUTTONS **//
/* Box shadow around Primary button*/
.sqs-block-button-element {
box-shadow: 6px 6px 0px 0px #202020!important;
transition: 0.3s !important;
opacity: 1!important;
}
.sqs-block-button-element:hover {
box-shadow: -6px -6px 0px 0px #202020 !important;
opacity: 1!important;
}
/* Box shadow around header button*/
.header-actions-action .btn {
padding: 20px 30px !important;
box-shadow: 6px 6px 0px 0px #202020!important;
transition: 0.3s !important;
}
.header-actions-action .btn:hover {
box-shadow: -6px -6px 0px 0px #202020!important;
opacity: 1 !important;
}
.sqs-block-button-element{
border: 1px solid #202020 ;
box-shadow: 4px 4px 0px 0px #202020;
padding: 10px 20px;
transition: all 0.3s ease 0s;
}
.sqs-block-button-element:hover {
box-shadow: -4px -4px 0px 0px #c6a39d;
opacity: 1 !important;
}
/* Box shadow around Form button*/
.sqs-system-button {
box-shadow: 6px 6px 0px 0px #A0D2E9!important;
transition: 0.3s !important;
opacity: 1!important;
}
.sqs-system-button:hover {
box-shadow: -6px -6px 0px 0px #A0D2E9!important;
opacity: 1!important;
}
Other Options:
Shadow:
.sqs-block-button-element {box-shadow: 5px 5px 15px 3px #000}
Solid:
.sqs-block-button-element {box-shadow: -15px -15px pink}
Inset:
.sqs-block-button-element {box-shadow: inset 5px 5px 10px 0px rgba(0,0,0,0.5)}
Go Arrow Button
// Go Arrow Button - Button Padding
/*.sqs-block-button-element--medium
{
padding: 20px 30px !important;
border: 1px solid #fff !important;
}
.sqs-block-button-element--medium:after {
content: '➔';
color: #fff !important;
border-left: 1px solid #fff;
padding-left: 30px;
margin: 0px 0px 0px 30px;
}
Circle Button
// Circle Button Style //
.sqs-block-button-element--medium {
padding: 100px 45px !important;
border-radius: 50% !important;
}Underline shrinks on hover
/* Button Line Shrinks on hover */
a.sqs-block-button-element--large.sqs-button-element--secondary.sqs-block-button-element:after {
content: "";
background-color: #212121;
position: absolute;
left: 0;
width: 100%;
height: 2px;
bottom: 0;
transition: all .3s ease;
transform: scale(1);
}
a.sqs-block-button-element--large.sqs-button-element--secondary.sqs-block-button-element {
position: relative;
}
a.sqs-block-button-element--large.sqs-button-element--secondary.sqs-block-button-element:hover:after {
transform:scale(0.5);
transition: all .3s ease;
}Button Fill Underline 0px Line width
To make line shrink use scale 0.5. To make line disappear, use scale 0.
In Color Settings, button text must be transparent and button fill needs to be the color of the text and line.
Set button settings to Fit NOT Fill if you want the line to match the length of the wording. Then have the button spacing adjusted accordingly.