Adding a fixed width to a button using CSS

Question

I am trying to create a button with a fixed width and the text in the centre of the button, the button is defined in the main Style.css, but I would like to add additional styling for some pages and keep the buttons a fixed width, I have tried to use CSS - width-150px to create the width but this has no effect on the button, any thoughts

It is on a WordPress website

HTML

   <a class="button primary-button width-150px" href="/membership-profile">Membership Profile</a>
    <a class="button primary-button width-150px" href="/password-reset">Password Reset</a>
    <a class="button primary-button width-150px" href="/test-page">Test</a>
    <a class="button primary-button width-150px" href="/test-page">Test</a>
    <a class="button primary-button width-150px" href="/test-page">Test</a>

CSS

.width-150px{
    width: 150px;
    display: inline-block;
}

This is what I can find in the style.css file

/* =08. Buttons
-------------------------------------------------------------- */

button,
.button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
    background-color: #199cd8;
    background-clip: border-box;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    outline: none;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 0 20px;
    text-transform: uppercase;
    line-height: 40px;
    display: inline-block;
    zoom: 1; *display: inline;
}

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 * 3. Required for 'a' elements
 */

button:hover,
.button:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #1581b2;
    color: #fff;
}

/* Active */

button:active,
.button:active,
input[type="reset"]:active,
input[type="submit"]:active,
input[type="button"]:active {
    background-color: #199cd8;   
}

/* === Differnt Colors and Sizes Of Primary and Secondary Buttons  === */


/* Featured */

.primary-button {
    background-color: #199cd8;
}

#header-button-container .primary-button,
#header-button-container .secondary-button {
    color: #fff!important;
    vertical-align: baseline;
    }

.primary-button:hover{
    background-color: #1581b2;
}   

.secondary-button {
    background-color: transparent;
    border: 1px solid #fff;
}

.secondary-button:hover{
    background-color: #199cd8;
}   

.site-header .secondary-button { color: #fff; }

/*#header-button-container .secondary-button {
    color: #000;
    border-color: #000;
    }   

.secondary-button:hover,
#header-button-container .secondary-button:hover {
    background-color: #fff;
    color: #199cd8; 
    }

#header-button-container .secondary-button:hover {
    border-color: #199cd8;
}*/


/* === Default Styles === */

.button {
    margin: 5px;
    }

.button:hover {
    color: #fff!important;
    }   

EDIT ! Using the width-150px stops the buttons from going any wider than 150px so this is more of a maximum size rather than actual size, if I reduce to to 50 all my buttons reduce in size, if I change it to 300 the buttons stay their normal size

Answer 1

define your more specific classes further down in your css.

width-150px is pretty specific, so it should come further down the file than less specific declarations, like .button and .primary-button.

Crucially, those preceding declarations should be at the same level of specificity, so also classes (as they are in this example).

Ideally, you would end up with:

.button {
    // very general button styles
}
.primary-button {
    // over-rides of button styles
    // specific primary button styles
}
.width-150px {
    // over-ride of width
}

Remove unnecessary specificity from previous selectors

You are much much better off removing unecessary specificity from previous styles than using specificity depth charges like ID or !important to over-ride. So if you find: #wrapper-class .button for example, take .button out of the wrapper class.

Some more info about specificity. And more ...

It's probably worth checking your source order in the <head> of the document. WordPress can get a little complicated in this area and the earlier your style file with .width-150px is loaded the more likely it is to be over-ridden by subsequent files.