Custom Liquid Video + Button

Store Design
,

Topic summary

A user is customizing a liquid video section with an auto-play feature and needs help styling an accompanying call-to-action button. They want the button to have a transparent background with white borders and text, turning black on hover while keeping white text.

Main Issues:

  • How to apply custom CSS styling to the button
  • A thin black border appears within the white border that needs removal
  • Interest in adding text overlay above the button with custom font/color

Progress Made:
A helper (@Made4uo-Ribe) requested the store URL to provide specific CSS solutions. After accessing the password-protected site (nattstudios.com, password: 1234), they provided CSS code to add to the theme’s main.css/base.css file:

.cta-btn.button:after, .cta-btn.button:before {
    box-shadow: 5px white;
}
.cta-btn.button:hover {
    border: none;
}

Current Status:
The initial solution didn’t fully resolve the black border issue. The user is still seeking help to remove this thin border, noting it’s difficult to see but present within the white outline. The discussion remains open with the user awaiting further assistance.

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

6fb90ec95cc88297fb83d600272d1d57.png
6fb90ec95cc88297fb83d600272d1d57.png490×322 23.4 KB

Hello! I have created a Liquid Custom Video for automatic play etc.
I have also created a button, but I don’t know how to customize this button.

I’d like to make it transparent with white outlines and white text, and if possible, make the whole button black (text still white) when hovering. Is this possible?

One more question, could I also add a text over the button? And how do I go about changing its font and color.

-CODE UNDER HERE-

.video-cover { position: relative; } .video-cover .cta-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; } video { display: block; margin: 0 auto; width: 100%; height: 50%; } @media screen and (max-width: 767px) { video { display: none; } }
Products
1 Like
2

Dumb question, what is CSS rule? Custom CSS or in the Liquid code?

3

Hi @SamSukhoonNordl

Would you mind to share your store URL with the custom video? Sorry, hard for me to edits without seeing the actual current design. Thanks!

4

Thank you so much, looks great. However within the white border, theres a black border, very thin. What causes this and could you remove it?

18eeafde56f67b42e7aa3a2c1649ce3b.png
18eeafde56f67b42e7aa3a2c1649ce3b.png209×107 9.12 KB

5

Absolutley. https://nattstudios.com/ 1234

Please ignore the pictures and video… they will obviously be changed when we have everything ready.

It just helped us visually.

6

Also, critics are appericated if theres anything you see!

7

It’s password protected.

8

1234

9

Thanks! Seems like it already change the color. I just add some fix.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.cta-btn.button:hover {
    border: none;
}
.cta-btn.button:after, .cta-btn.button:before {
    box-shadow: 5px white;
}
  • And Save.
10

Hey! Sadly didn’t work. I just want to remove the black border within the white one.
It’s quiet hard to see though..

11

? :slightly_smiling_face: