x

Assign individual buttons an html id tag?

I'd like to be able to assign individual buttons ID tags so that I can easily customize the CSS for that element only. I don't see how to do this, as there isn't an option to assign an ID built-in to the button itself the way it is for some other elements. As is, I can use the global stylesheet to change all the buttons for the entire site, but I can't seem to target an individual button even if I use inspector to focus on that particular selector and assign properties. Am I missing something obvious?

1,180 Views
Message 1 of 2
Report
1 REPLY 1

@thalia_quire While Weebly has unfortunately never added class and id parameters to its content elements, for simpler elements, you can effectively brew your own class/id specific items using the Code Element to specify the element html and Weebly classes.

For the Button Element, a regular, large Weebly button html with 10px of spacing above and below it looks something like this:

<a class="wsite-button wsite-button-large wsite-button-regular" style="margin:10px 0;" href="/a-page-on-your-site.html">
<span class="wsite-button-inner">Click to visit a page</span>
</a>

Modify the "large" to "small" and "regular" to "highlight" if you wish to use those button variants (you see these when you set up a button using the Weebly Button Element attributes panel). You can also modify the spacing as needed (the 10px top/bottom margin in the inline css). And, of course, you'll need to specify the url link target (href) and the button text ("Click to visit a page"). Once you've done all of that, you can add an id to the anchor tag (in addition to the Weebly button classes attribute) so that you can target that specific button in your css.

<a id="my-button-id" class="wsite-button wsite-button-large wsite-button-regular" style="margin:10px 0;" href="/a-page-on-your-site.html">
<span class="wsite-button-inner">Click to visit a page</span>
</a>
1,171 Views
Message 3 of 2
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.