I want to change colour of button of custom added video with text section

Store Design

Topic summary

Goal: change the button text color in a custom “video with text” section on the Shopify Dawn theme.

Recommended approach: edit the theme’s CSS.

  • Add a rule in base.css (or theme.css/styles.css/theme.scss.liquid): .video-with-text__content .video-with-text__text + .button { color: your-color; }. Some solutions used !important (e.g., color: red !important) to ensure it overrides existing styles.
  • To style both the button background and text, another option: .video-with-text__content a { background-color: #0078a0 !important; color: white !important; }.

Implementation steps:

  • Admin > Online Store > Themes > Edit code.
  • Open the CSS file (base.css or equivalent), paste the rule at the end, save, and reload the page. A screenshot of the navigation was shared, but the text instructions suffice.

Outcome: the CSS change worked and the button color updated successfully. Status: resolved; no outstanding questions.

Summarized with AI on December 27. AI used: gpt-5.
1

I have created a section video with text using coding for dawn theme, it has a button, I want to change the button text colour, Please help me out with it? I have used this article to make the section = https://community.shopify.com/c/shopify-design/how-can-i-create-a-video-with-text-section-in-the-dawn-theme/m-p/1490695

2

Hello! @Shivani3 Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
.video-with-text__content .video-with-text__text + .button {
  color:#fff;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

3

Dear @Shivani3 ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1717756352776.png
BSSCommerceB2B_0-1717756352776.png400Ă—195 26.3 KB

Step 2: Search for the file base.css, theme.css, styles.css or theme.scss.liquid. And add this code snippet to the end of the file.

.video-with-text__content .video-with-text__text + .button {
  color: red !important;
}

In this step, you can change the color which you want.

In my example, I choose color red.

Step 3: Save your code and reload this page.

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

Have a nice day sir!

4

Add this code in your base.css file:

.video-with-text__content a {
  background-color: #0078a0 !important;
  color: white !important;
}

Customize the background color of the button and the text color to your liking!

5

It is working, Thank you!

1 Like