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;
}