Button Animation for Dawn Theme

[Scottrise]

Hi,

We are trying to make our website a little more interactive throughout various means.

One thing we desperately want to add is buttons that are animated. An example of the type of button animation we would like to use as an influence is shown at:- https://vixrshop.com/

This is our current shop:- https://fetch-fluff.myshopify.com/?_ab=0&_fd=0&_sc=1

Password:- gewlye

Any help to achieve something similiar to what they have with regards to buttons & also the "Get Yours Now" button displayed on the home page would be hugely appreciated!

Thank you

[made4Uo]

Hi @Scottrise 

For the home page button text edit, you need to go to Theme edits, and change the text.

Please follow the instructions below to achieve the same button animation. 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

a.button.button--primary,a.button.button--secondary {
    position: relative;
    display: inline-block;
    padding: 14px 28px;
    line-height: normal;
    color: #fff;
    border: 2px solid transparent;
    border-radius: 0;
    text-transform: uppercase;
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
    text-align: center;
    letter-spacing: .2em;
    background-color: transparent;
    transition: color .45s cubic-bezier(.785,.135,.15,.86),border .45s cubic-bezier(.785,.135,.15,.86);
    z-index: 1;
    -webkit-tap-highlight-color: initial;
    color: var(--button-text-color);
}

a.button.button--primary:before,a.button.button--secondary:before {
    position: absolute;
    content: "";
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: color .45s cubic-bezier(.785,.135,.15,.86),border .45s cubic-bezier(.785,.135,.15,.86);
    transform: scale(1);
    transform-origin: left center;
    background-color: var(--gradient-base-accent-1);
    border: 2px solid var(--gradient-base-accent-1);
    z-index: -1;
}


a.button.button--primary:hover,a.button.button--secondary:hover {
    color: var(--gradient-base-accent-1);
    border: 2px solid var(--gradient-base-accent-1);
}

a.button.button--primary:hover:before,a.button.button--secondary:hover:before {
    color: #fff;
    background-color: var(--gradient-base-accent-1);
    transform-origin: right center;
    transform: scaleX(0);
    transition: transform .45s cubic-bezier(.785,.135,.15,.86);
}

a.button.button--primary:after,a.button.button--secondary:after {
    display: none
}

Result: