Custom button style- Image with text overlay

[elotomo]

Hello,

I would like to modify the w button in image with text overlay on home page.

1. I want to move the button to the center of the inscription “the daylight collection”

2. I would like to increase the font in the normal button as well as the hover button.

3. Is it possible to set a white border in the hover button? I only mean the button on the home page in image with text overlay. I have already set a transparent background as seen in the video, but unfortunately I cannot set the frame.

I would like it to be like the example photo below, but the corners should remain rectangular, not rounded.

My store: https://www.drollsport.com/

Password: Wixa

Theme: Symmetry

[BSS-TekLabs]

• Here is the solution for you @elotomo
• Please follow these steps:

• Then find the base.css or theme.css , main.css file.
• Then add the following code at the end of the file and press ‘Save’ to save it.

@media only screen and (max-width: 600px) {
.text-overlay__button.button-row__btn {
     font-size: 17px !important;
    margin-left: 200px !important;
}
}
.text-overlay__button.button-row__btn:hover {
         border: 3px solid white !important;
}

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[elotomo]

Hi @BSS-TekLabs

I pasted your code into main.css and unfortunately nothing changed. I don’t know if I did something wrong.

[BSS-TekLabs]

@media only screen and (min-width: 600px) {
.text-overlay__button.button-row__btn {
     font-size: 17px !important;
    margin-left: 200px !important;
}
}
.text-overlay__button.button-row__btn {
         border: 3px solid white !important;
}

can you try add this code again @elotomo

[elotomo]

Now everything works, but the border in the hover button does not show.

[BSS-TekLabs]

Please find this code and delete the part I marked in red.

[Made4uo-Ribe]

Hi @elotomo

Check this one.

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.

@media only screen and (min-width: 1100px) {
    .text-overlay__button-row.button-row.lightish-spaced-row-above {
        width: 20em;
        display: flex;
        justify-content: center;
    }
}
@media only screen and (min-width: 767px) and (max-width: 1099px) { 
    .text-overlay__button-row.button-row.lightish-spaced-row-above {
        width: 15em;
        display: flex;
        justify-content: center;
    }
    a.text-overlay__button.button-row__btn.btn.btn--secondary, 
    a.text-overlay__button.button-row__btn.btn.btn--secondary:hover {
        font-size: 20px !important;
    }
}

.text-overlay__inner a.text-overlay__button.button-row__btn.btn.btn--secondary:hover {
    border: 1px solid white !important;
}

• And Save.

• Result:

• 

  desktop.

• 

  tablet

• I didnt change the mobile screen.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[elotomo]

Thank you

[elotomo]

Thank you!