Mariners Button Style

ButtonsFree

Jun 14

Written By Will Myers

Change your tertiary button style into a dynamic arrow on hover.

Video

Demo

Usage

Paste the below code into your Design » Custom CSS area. This will transform all of your Tertiary Buttons into this button style.

Be sure to set the individual button layout setting to “FIT” not “FILL”.

Customize

Any font changes you want made still need to happen in the Design » Site Styles area.

Adjust any of the custom properties (properties starting with two dashes --) in the code below.

The Code

  
/**
* 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);
  }
}
  

For Developers

Here is the code that I built out in the video, feel free to tinker with this below or hit the “Edit on CodePen” button to open this up in a new tab.

See the Pen Button Style > by Will Myers (@Will-Myers) on CodePen.

References

This button style came from the Mariner’s Church website.