javascript - Adding a fixed width to a button using CSS

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

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;
    }

Share Improve this question edited Jun 20, 2015 at 14:40 asked Jun 20, 2015 at 13:47 user396581 1191 gold badge3 silver badges10 bronze badges

button primary-button probably have styles on them too, inspect the item on the page with dev tools (chrome or firefox have great built in ones) and check what styles are actually being applied to the button. – ajmajmajma Commented Jun 20, 2015 at 13:52
No effect? – Teemu Commented Jun 20, 2015 at 13:52
with only this html and css I really cannot tell you what is your problem. You must have overwritten width with another css rule. Your code works just fine when I tried it. Just in case add !important next to the width rule – Kristijan Iliev Commented Jun 20, 2015 at 13:54
if you use !important there's a good chance you'll be back here saying 'why is this width always 150px'? – Toni Leigh Commented Jun 20, 2015 at 14:07
From what I have tried 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 – user396581 Commented Jun 20, 2015 at 14:23

| Show 1 more comment

6 Answers 6

Sorted by: Reset to default 6

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.

Change HTML to:

<a class="primary-button" href="/membership-profile">Membership Profile</a>

and CSS to:

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

This way you are applying a style (courtesy of the CSS class) to all HTML elements with the class 'primary-button'.

You are using css a bit wrong here. The intention is to define classes in a "semantic" way, so they have meaning. So primary-button is a very good class name for instance :)

There are two thing you can do: add a class, but in your case, if I understand correctly, the primary-button should look different depending on the context, on some pages, in a sidebar?

CSS is perfect for this: it allows you to specify a general primary-button but add exceptions for primary-buttons inside another container/selector.

Suppose your sidebar div has a class sidebar, you could say

.sidebar .primary-button {
  width: 80px;
}

and this will make sure that all elements with class primary-button inside an element with class sidebar have the width 80px. For instance to make sure the buttons are smaller inside the sidebar.

It might depend on wordpress theme you use, but in general the body tag gets classes based on the page you are on. So you could use the classes from the body tag to change the appearance of all buttons on a specific page.

One thing that you have to know about a tags is that they are inline elements, so in essence height or width does not affect them. But there are two ways to make it respect height or width

By positioning them absolutely.
By changing its display property to 'inline-block'

So the styles you are looking for is this

a{
   display: inline-block;
   width: 150px;
   text-align: center;
}

You might need to specify more your css code so the width will not be taken from another class:

Adding .button.primary-button.width-150px to your css will give specificity to your code and if your item has all classes button + primary-button + width-150px it will have more priority to get the 150px width.

You should also keep .width-150px; if you use this class somewhere else.

Tip: If your link/button is inside another tag like li or div or something with another width value, you might need to change the above tag's width.

From your comments i suspect that your <a> tag is inside a tag with higher width.

.width-150px{
    width: 150px;
    display: inline-block;
    text-align: center;

}

.button.primary-button.width-150px{
    width: 150px;
    display: inline-block;
    text-align: center;

}

<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>

It's working here. You can add !important to override the width. E.g: width: 150px !important;

.width-150px {
  width: 150px;
  display: inline-block;
  text-align: center;
  border: 1px solid #ddd;
  margin: 10px;
}

   <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>

EDIT

If you want to avoid using !important, you can use more complex selector to override the style. E.g:

.button.primary-button.width-150px {
  width: 150px;
  display: inline-block;
  text-align: center;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Adding a fixed width to a button using CSS - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)