Create a Fixed Width Button in CSS

Question

I have several buttons that have variable width and I would like them to all be a certain width. When I attempted to add width: 150px; it doesn't work. How do I create these buttons that will all have a set width?

Here is a Fiddle and here is the code:

HTML

<p><a class="dark_button 150px-width" href="#">Lorem</a></p>
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum</a></p>
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum dolor</a></p>
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum dolor sit amet</a></p>

CSS

.dark_button{
  border-top: 1px solid #969696;
  background: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#545454), to(#000000));
  background: -webkit-linear-gradient(top, #545454, #000000);
  background: -moz-linear-gradient(top, #545454, #000000);
  background: -ms-linear-gradient(top, #545454, #000000);
  background: -o-linear-gradient(top, #545454, #000000);
  padding: 5px 10px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: #e3e3e3 !important;
  font-size: 14px;
  text-decoration: none;
  vertical-align: middle;
}
.dark_button:hover {
  border-top-color: #4f4f4f;
  background: #4f4f4f;
  color: #ccc;
  text-decoration:none;
}
.dark_button:active {
  border-top-color: #4a4a4a;
  background: #4a4a4a;
}

.150px-width{
 width: 150px;
}

score 16 · Accepted Answer · answered Sep 24 '12 at 01:56

Couple issues:

The a element is an inline element, meaning you cannot give it an explicit width.
Classes cannot begin with a number.

You'll neeed to set your display property to something like block or inline-block to have it respect your wishes with regards to width. Additionally, use a classname like width-150px instead, which solves problem number 2 above.

Fiddle: http://jsfiddle.net/yQu8H/5/

score 3 · Answer 2 · edited May 23 '17 at 12:01

3

CSS Class names cannot start with a number. You must use a letter, and the names are case-sensitive.

See: Which characters are valid in CSS class names/selectors?

edited May 23 '17 at 12:01

Community

1
1

answered Sep 24 '12 at 01:53

Mike D

186
1
8

1

This is not the whole answer. – Eric Rini Sep 25 '12 at 01:18

score 2 · Answer 3 · answered Sep 24 '12 at 02:01

The answer about the class name is correct, but only part of the solution.

You also need to enclose the anchor element (an inline element) inside a block element (like a div) and then assign the width to the block element. So you want the "structure" styling to apply to the div and the text styling to apply to the anchor.

This is your fiddle with a little refactoring applied.

http://jsfiddle.net/gZtdZ/

score 1 · Answer 4 · answered Sep 24 '12 at 01:56

1

You can't begin class names with numbers. Maybe that's the problem. Please check the Grammar

answered Sep 24 '12 at 01:56

jpruizs

485
1
5
19

Create a Fixed Width Button in CSS

4 Answers4