Duplicate button in CSS or add width

Copy and paste the CSS code in the style.css file, then change the name of the class selector for the new style and the new width.

What you could also do is the following for example you have two types of buttons but the only difference between them is the width so what you could do is have a class called button and button2. The class button2 class would have a larger width.

<a class="button" href="#" title="Title 1">Button 1</a>
<a class="button button2" href="#" title="Title 1">Button 2</a>

so the CSS would be

.button {
    //Some styling here
    width: 100px;
}
.button2 {
    width: 200px;
}

How this works is you can add multiple classes to any element so CSS reads down so it would add the style for the class button to every link width the class button but when you also add the class button2 because the CSS code for button2 is below button it will override its width and make it a width of 200 pixels.

Please leave me know if you have any questions about this works.

Thank you VERY much for the reply. A question (I am a WYSIWYG guy):

The style sheet has a LOT of button code. Do I duplicate all of it? And if so, do I retitle every instance of “button” to “button2”?

Here’s the code for buttons:

[Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

Sorry, let’s see if I can figure out pastebin for the CSS button code:

https://pastebin.com/6zh9MWxb

Got it.

Hi Richmond what you need to do is add the class button2 along with the class button like this.

<span class="button-wrapper button button-2">
    <a href="#">Button 2</a>
</span>

You then would use the following CSS

.button-wrapper.button-2 {
  width: 200px;
  max-width: none;
}

In the above code
The reason why we would set the max-width to none is because otherwise it would only go to a max width 1064px as stated in the class button-wrapper.

I would also recommend unless other elements other then the span element is the class button-wrapper to remove span in front of the class button-wrapper because it will search for every span that has a class called button-wrapper which slows down the loading time.

If you need any further help please leave me know.

Colin,

Thanks, I feel like a third grader in the company of people who actually know code… I’ll see if I can stumble through this, thanks.

If you are only starting learning coding I would recommend https://www.w3schools.com/ for learning the basics of HTML, JavaScript and CSS.

Leave me know if you have any other issues.