Help needed to customise buttons using a png file

Site URL: https://zelutionsagency.com/

Hi there, 

I'm looking to customise my buttons on my website using a png file. (see image below for example)

Anyone who can help me with a css code on how to change buttons to a branded / customised png file?

See below for website URL and password:

URL: https://zelutionsagency.com/
PW: 123456

Thank you for your help!

Hi don't think I completely understand what you are trying, but the code below should help you add the arrow in your example above.

You can also find the code with a nice explanation here: https://www.ghostplugins.com/steps/go-arrow-button-style-version-2

Code:

// Go Arrow Button - Button Padding //

.sqs-block-button-element--medium
{
    padding: 20px 30px !important;
    border: 2px solid #000000 !important;
}

// Go Arrow Button - Arrow Icon Style //

.sqs-block-button-element--medium:after {
    content: '➔';
    color: #000000 !important;
    border-left: 2px solid #000000;
    padding-left: 30px;
    margin: 0px 0px 0px 30px;
}

The Video above will help you add a specific PNG to your buttons.

On 5/27/2021 at 9:26 AM, Wiehahn said:

Hi don't think I completely understand what you are trying, but the code below should help you add the arrow in your example above.

You can also find the code with a nice explanation here: https://www.ghostplugins.com/steps/go-arrow-button-style-version-2

Code:

// Go Arrow Button - Button Padding //

.sqs-block-button-element--medium
{
    padding: 20px 30px !important;
    border: 2px solid #000000 !important;
}

// Go Arrow Button - Arrow Icon Style //

.sqs-block-button-element--medium:after {
    content: '➔';
    color: #000000 !important;
    border-left: 2px solid #000000;
    padding-left: 30px;
    margin: 0px 0px 0px 30px;
}

 

Wiehahn, thank you so so much! 

The code works perfectly. Just changed out the symbol to one that I prefer and got it exactly as intended. So good. Thanks!

@Zenia Do you need help on these?

Site URL – https://zelutionsagency.com/

1. (Mobile-Homepage) Resize what we do text background?

2. (Tablet-Homepage) Similar on tablet

3. (Tablet/Mobile-Overlay) Change logo color?

4. (Mobile-What we do) Make Explore same line?

5. (Tablet-Branding) Fix these text?

6. (Tablet-Content) Similar

7. (Tablet-Web Design)

On 6/1/2021 at 4:36 PM, tuanphan said:

@Zenia Do you need help on these?

Site URL – https://zelutionsagency.com/

1. (Mobile-Homepage) Resize what we do text background?

2. (Tablet-Homepage) Similar on tablet

3. (Tablet/Mobile-Overlay) Change logo color?

4. (Mobile-What we do) Make Explore same line?

5. (Tablet-Branding) Fix these text?

6. (Tablet-Content) Similar

7. (Tablet-Web Design)

 

@tuanphan , thank you for your attention to all these details. All your suggestions are spot on.

Would indeed be happy to get help with this!

Thank you so much! 

Hi @tuanphan

Both codes works perfectly thanks. Q1,2,3 and 4 i solved.

I haven't been able to fix the logo color for mobile version. Would appreciate your help with this.

Also, would appreciate if you could also please help with resizing background images on the about page and what we do page.

Kindest,
Zenia 

22 hours ago, Zenia said:

Hi @tuanphan

Both codes works perfectly thanks. Q1,2,3 and 4 i solved.

I haven't been able to fix the logo color for mobile version. Would appreciate your help with this.

Also, would appreciate if you could also please help with resizing background images on the about page and what we do page.

Kindest,
Zenia 

Add to Design > Custom CSS

/* resize background image */
@media screen and (max-width:767px) {
/* about */
[data-section-id="60abe38fbd6935109d8bbdc9"] img {
    object-fit: contain !important;
}
/* what we do */
[data-section-id="60a8a588d5bb325fd27f82b8"] img {
    object-fit: contain !important;
}
}

1 hour ago, tuanphan said:

/* resize background image */ @media screen and (max-width:767px) { /* about */ [data-section-id="60abe38fbd6935109d8bbdc9"] img { object-fit: contain !important; } /* what we do */ [data-section-id="60a8a588d5bb325fd27f82b8"] img { object-fit: contain !important; } }

Amazing @tuanphan

Works perfectly. Really appreciate your help, thanks.