Change size of button and add scaling effect to button

Store Design
, , , ,

Topic summary

A user seeks help modifying a contact form confirmation button on their Shopify store (seraneeva.com). They want to reduce the button’s horizontal width and apply the same scaling animation effect used on other site buttons.

Original Animation Code:
The existing buttons use a CSS animation with:

  • A pseudo-element (:before) that scales from 0 to full width
  • Transform properties with cubic-bezier timing
  • 0.8s transition duration
  • Scale effect on hover (0.95, 0.9)

Proposed Solutions:

Solution 1: Add padding: 10px 20px to .btn and modify the :before pseudo-element with width transitions

Solution 2: Target the specific button with button.pop-up-btn:before selector, implementing:

  • Background color variable
  • Absolute positioning (top: 50%, left: 50%)
  • Transform with translate and scale properties
  • Same 0.8s cubic-bezier transition
  • Scale effect (0.95, 0.9) on hover

Both solutions recommend adding CSS to the theme’s stylesheet (base.css, theme.css, or theme.scss.liquid) via Shopify Admin.

Status: Multiple solutions provided; awaiting user confirmation on which approach worked.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

Website: seraneeva.com

After a user hits send on the contact form a message pops up. Pic for reference. How can I make the button smaller horizontally and add the same animation effect as all other buttons on the site.

Code for button animation:

.btn { background-color: unset !important; }
.btn:before { }
.btn:before {
border-radius: 2px;
content: “”;
background-color: var(–primary-btn-bg-color);
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: -1;

transform: translate(-50%, -50%);
transition-duration: 0.8s;
transition-property: transform;
transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
}

.btn:focus:before, .btn:hover:before, .btn:focus:before, .btn:hover:before {
transform: translate(-50%, -50%) scale(.95, .9);
}

Screenshot 2024-05-29 at 12.39.19 PM.png
Screenshot 2024-05-29 at 12.39.19 PM.png2342×558 11.3 KB

2

Hi @flammagreg
To make the button horizontally smaller and add the same animation effect as all the other buttons on the website. You can refer to the following CSS style settings:

.btn {
background-color: unset !important;
padding: 10px 20px;
}

.btn:before {
border-radius: 2px;
content: “”;
background-color: var(–primary-btn-bg-color);
width: 0;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
transition-duration: 0.8s;
transition-property: width, transform;
transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
}

.btn:focus:before,
.btn:hover:before {
width: 100%;
transform: translate(-50%, -50%);
}

I hope this proves helpful for you.

3

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

button.pop-up-btn:before {
    background-color: var(--primary-btn-bg-color);
    border-radius: 2px;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%) !important;
    transition-duration: .8s;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.5,0,0,1) ;
  }
  
   button.pop-up-btn:hover:before {
    transform: translate(-50%, -50%) scale(.95, .9) !important;
   }

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like