[Support request] Formatting button

[crosby87]

Hi there,

I’ve added the following code to my blog post:
<a data-formkit-toggle="594b26d945" href="https://dolgospenz.ck.page/594b26d945">Your link text</a>

I wanted to style the button separately from the manual option, so I have added the following CSS:

.button, .button:visited {     
    background: #012269;     
    border-radius: 7px; 
} 

It works perfectly on desktop, but for some reason it does not work on mobile. It basically does not add anything. I don’t have coding knowledge, so the second code may also be wrong.

Could you please help?

[Ying]

Hi there,

I’m sorry to ask, but where or which button shall we be looking at?

[crosby87]

Sorry for not specifying that.

Button on the first form under the link provided. It says ‘Button Text’. See ss: https://imgur.com/a/MOaxLAr

[Elvin]

Hi there,

I’ve checked the page you’ve linked and I didn’t see this element in it similar to the photo you’ve shared.

Here’s what I see on my end – https://share.getcloudapp.com/P8u8ZxGN

Can you confirm/verify if the link is the correct one? Let us know. 😀

[crosby87]

I provided the password to it earlier in private. See it again.

[David]

Hi there,

where did you add the HTML ie.

<a data-formkit-toggle="594b26d945" href="https://dolgospenz.ck.page/594b26d945">Your link text</a>

Like Ying and Elvin i searched the sites source code for that element and its not found.

[crosby87]

Hi David,

Sorry, I see I changed the ‘text’ part in the code. Probably you search CTRL+F for the entire code, and that’s why you did not see it. Apologies!

Here’s the code:
<a data-formkit-toggle="594b26d945" href="https://dolgospenz.ck.page/594b26d945" class="button" span="">Button Text</a>

This is a code from ConvertKit (my email provider system). It is a button which I would like to style as I noted in my original ticket.

Thanks for your help!

[David]

I didn’t search for the entire element. I looked for: data-formkit-toggle and that doesn’t return any results. So we can’t see the HTML you added to the page.

How was it added ? Is it in the page editor or using a hook ? Let me know.

[crosby87]

Hi David,

That’s strange.

I simply added the code using the ‘Custom HTML’ block into normal blog post.

Even when I log out from the admin account, and check it in Incognito, I can see the source code. See it here: https://imgur.com/a/0WKELzP

Did you enter the PASSWORD when visiting the site mentioned in private?

[crosby87]

Made some further changes on the back end. Now you should really be able to see it, please also see previous mail (including info provided in private).

[Ying]

Hi there,

I still don’t see the button. This is what I see:
https://www.screencast.com/t/y2LaTSZKLd

Can you make sure cache is all flushed?

[crosby87]

Ying,

You are not entering the password on the site.

I provided it in the private box below.

Let me know.

[crosby87]

I shared the link in the private box below, with the following link: https://imgur.com/a/XqcoLN9 (Shows where you need to enter the password provided).

[Ying]

Ah sorry, I missed the password part, can’t read your language.

So all the WP buttons are using the button class, you’ll need to use a more specific class for this button, eg. custom-button.

The HTML will become:
<a data-formkit-toggle="594b26d945" href="https://dolgospenz.ck.page/594b26d945" class="custom-button" span="">Button Text</a>

And the CSS will become:

.custom-button, .custom-button:visited {     
    background: #012269;     
    border-radius: 7px; 
} 

Let me know 🙂

[Author]

Posts