Title: Duplicate button in CSS or add width
Last modified: August 20, 2016

---

# Duplicate button in CSS or add width

 *  [Douglas Dye](https://wordpress.org/support/users/richmond-media/)
 * (@richmond-media)
 * [14 years ago](https://wordpress.org/support/topic/duplicate-button-in-css-or-add-width/)
 * Using Artisteer for design, I am using **class=”button”**_ in pages to make text
   links into buttons. But I need to set the width for some types of these buttons._
 * Is there a way to either duplicate the button code in the style sheet so I can
   use (for example) **class=”button2″**_ for those buttons?_
 * OR can I set individual button widths in the code on the page?
 * Thanks in advance.

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [14 years ago](https://wordpress.org/support/topic/duplicate-button-in-css-or-add-width/#post-2788606)
 * 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.
 *  [Colin Murphy](https://wordpress.org/support/users/colin-murphy/)
 * (@colin-murphy)
 * [14 years ago](https://wordpress.org/support/topic/duplicate-button-in-css-or-add-width/#post-2788620)
 * 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.
 *  Thread Starter [Douglas Dye](https://wordpress.org/support/users/richmond-media/)
 * (@richmond-media)
 * [14 years ago](https://wordpress.org/support/topic/duplicate-button-in-css-or-add-width/#post-2788660)
 * 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](http://codex.wordpress.org/Forum_Welcome#Posting_Code).
   The maximum number of lines of code that you can post in these forums is **ten
   lines**. Please use the [pastebin](http://wordpress.pastebin.com/)]_
 *  Thread Starter [Douglas Dye](https://wordpress.org/support/users/richmond-media/)
 * (@richmond-media)
 * [14 years ago](https://wordpress.org/support/topic/duplicate-button-in-css-or-add-width/#post-2788675)
 * Sorry, let’s see if I can figure out pastebin for the CSS button code:
 * [http://pastebin.com/6zh9MWxb](http://pastebin.com/6zh9MWxb)
 * Got it.
 *  [Colin Murphy](https://wordpress.org/support/users/colin-murphy/)
 * (@colin-murphy)
 * [14 years ago](https://wordpress.org/support/topic/duplicate-button-in-css-or-add-width/#post-2788677)
 * 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.
 *  Thread Starter [Douglas Dye](https://wordpress.org/support/users/richmond-media/)
 * (@richmond-media)
 * [14 years ago](https://wordpress.org/support/topic/duplicate-button-in-css-or-add-width/#post-2788687)
 * 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.
 *  [Colin Murphy](https://wordpress.org/support/users/colin-murphy/)
 * (@colin-murphy)
 * [14 years ago](https://wordpress.org/support/topic/duplicate-button-in-css-or-add-width/#post-2788730)
 * If you are only starting learning coding I would recommend [http://www.w3schools.com/](http://www.w3schools.com/)
   for learning the basics of HTML, JavaScript and CSS.
 * Leave me know if you have any other issues.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Duplicate button in CSS or add width’ is closed to new replies.

## Tags

 * [button](https://wordpress.org/support/topic-tag/button/)
 * [text button](https://wordpress.org/support/topic-tag/text-button/)
 * [width](https://wordpress.org/support/topic-tag/width/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 7 replies
 * 3 participants
 * Last reply from: [Colin Murphy](https://wordpress.org/support/users/colin-murphy/)
 * Last activity: [14 years ago](https://wordpress.org/support/topic/duplicate-button-in-css-or-add-width/#post-2788730)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics