Multiple custom buttons

[epergola]

Via CSS code-editing I successfully customized the buttons to my website. I now have four customized buttons: the small version, small-highlighted, large and large-highlighted.

Here's my next obstacle: I am now trying to create another set of customized buttons on the same website so that I can create SIX customized buttons (instead of four): I want to add another set of small and small-highlighted buttons in different colors. The CSS code-editing to customize the buttons is not a problem to me, but if I add two new button-codes, I can't select them when I drag a button to my webpage. Could anyone help me please? 

[PaulMathews]

@epergola You'll need to reference your custom css buttons using a Weebly code element rather than the button element. I'm presuming that you created custom classes for your two additional button styles.

To place a regular, small Weebly button on the page, use the following code (this particular button has top and bottom margin spacing of 10px specified in the inline styling).

<a class="wsite-button wsite-button-small wsite-button-regular" href="/link-page.html" style="margin:10px 0;">
<span class="wsite-button-inner">A standard small button</span>
</a>

Now, let's say that you created a custom class for your custom button that overrides the background color with a third background color option and perhaps a different color option for the button text (contained within the wsite-button-inner class for the button text span). In your css, you've specified the regular and hover state style attributes for your custom class. To implement this, just add the custom class to your button code:

<a class="wsite-button wsite-button-small wsite-button-regular btn-custom" href="/link-page.html" style="margin:10px 0;">
<span class="wsite-button-inner">A custom small button</span>
</a>

[epergola]

First of all: thank you for reaching out. 

I tried to do what you wrote. I indeed created a custom css class for the buttons and I had to play around with the html code a little to finally have this code: 

<a class="wsite-button-blue wsite-button-blue-small button-blue" 
href="LINK" 
style="height: 200px; width:600px; margin:0px 0px;">
<span class="wsite-button-blue-inner">< RETURN HOME</span>
</a>

But now there's this problem - and I'm not a pro, I'm sorry: the button doesn't appear in the same width and height as the regular buttons do, eventhough the css classes are the exact same except for the colors (that is basically the only thing I wanted to change). In the following picture you can see what I mean. Do you have a solution for this?

[PaulMathews]

@epergola Can't say I understand why you're imposing inline css (for height and width) in addition to the "button-blue" class. Remove the height and width from the inline css. If you want your custom button to have different dimensions from the standard Weebly small button, modify the css attributes in the class itself.

[epergola]

@PaulMathews That's my mistake indeed. I tried to modify the css attributes themselves at first, but they don't work with the HTML-code, or they don't appear as the standard buttons as you can see on the picture I added to my previous post: the white button (with pink letters) are my standard buttons (I customized) and the blue button (with the white letters) is the one I am trying to create as you are telling me to with the HTML-code, but the size doesn't match eventhough the CSS attributes are exactly the same as the other buttons. What can I do?