Adding fixed width to button with CSS
I am trying to create a button with a fixed width and text in the center of the button, the button is defined basically Style.css
, but I would like to add some extra styling for some pages and keep the buttons fixed width, I tried using CSS-width-150px to create the width, but this has no effect on the button, any thoughts
It's on the 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;
}
CHANGE! Using width-150px stops the buttons from being over 150px, so this is more of a maximum size than the actual size, if I reduce to 50 all my buttons shrink in size, if I change it to 300 the buttons stay normal size
source to share
define your more specific classes further down your CSS .
width-150px
is quite specific, so it should go below the file than less specific declarations like .button
and .primary-button
.
Really, those that precede the declarations should be at the same level of specificity as well as the classes (as they are in this example).
Ideally, you get:
.button {
// very general button styles
}
.primary-button {
// over-rides of button styles
// specific primary button styles
}
.width-150px {
// over-ride of width
}
Remove unnecessary BOM from previous selectors
You are much better off removing unnecessary specification from previous styles than using depth-of-specificity glitches like ID
or !important
to move. So if you find: #wrapper-class .button
for example take .button
from the wrapper class.
A little more detail on specificity . And much more...
It is probably worth checking your original order in the <head>
document. WordPress can get a little tricky in this area, and the sooner the c style file is loaded .width-150px
, the more likely it is to be redirected by subsequent files.
source to share
You are using css a little bit wrong here. The goal is to define classes in a "semantic" way, so they make sense. So primary-button
- this is a very good class name, for example :)
There are two things you can do: add a class, but in your case, if I understand correctly, primary-button
should it look different depending on the context, in some pages, in the sidebar?
CSS is perfect for this: it allows you to specify a general one primary-button
, but add exceptions for primary-buttons
inside another container / selector.
Suppose your sidebar div has a class sidebar
, you can say
.sidebar .primary-button {
width: 80px;
}
and this ensures that all class primary-button
elements inside class elements sidebar
have a width 80px
. For example, to make sure the buttons are smaller on the sidebar.
It might depend on the wordpress theme you are using, but in general the body tag gets classes based on your page. Thus, you can use classes from the body tag to change the appearance of all buttons on a specific page.
source to share
One thing you should know about tags is that they are inline elements, so essentially they are not affected by height or width. But there are two ways to make them take into account height or width.
- By placing them absolutely.
- By changing its display property to "inline block"
So, the styles you are looking for are
a{
display: inline-block;
width: 150px;
text-align: center;
}
source to share
You may need to specify more of your css code so that the width is not taken from another class:
Adding .button.primary-button.width-150px to your css will give specificity to your code, and if your element has all class buttons + primary button + width-150px it will have more priority to get 150px width.
You should also keep .width-150px; if you are using this class somewhere else.
Council. If your link / button is inside another tag such as an li or div or something with a different width, you may need to change the above tag width.
From your comments, I suspect the tag <a>
is inside a tag with a 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>
source to share
He works here. You can add !important
to override the width. For example: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 it !important
, you can use a more complex selector to override the style. For example:
.button.primary-button.width-150px {
width: 150px;
display: inline-block;
text-align: center;
}
source to share