Button Animation for Dawn Theme

3 0 2



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

Reply 1 (1)
Shopify Partner
3787 710 1098

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







Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!