Fixed width button

Giganews Newsgroups
Subject: Fixed width button
Posted by:  Jim S (j…@jimXscott.co.uk)
Date: Thu, 25 Apr 2019

Posting here as the css group seems dead.

I have a perfectly good css for a 'moveable' button. However it adopts the
width of whatever text I use. I would like to place buttons one above the
other, but with different widths it looks messy.
Any ideas for a way of fixng the width with centred text? (text likely to
be between 4 and 7 characters.

I currently use:
/*_text_button */
a.fbutton:link {
    border: 2px solid white;
    background-color: #FFEBCD;
    color: black;
    text-decoration: none;
    padding:  0.025em 0.25em;
    font-family: "Trebuchet MS";
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
}
a.fbutton:visited {
    border: 2px solid white;
    background-color: #FFEBCD;
    color: black;
    text-decoration: none;
    padding:  0.025em 0.25em;
    font-family: "Trebuchet MS";
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
}
a.fbutton:hover {
    border: 2px inset black;
    background-color: #FFEBCD;
    color: red;
    font-size: 1.5em;
    font-weight: bold;
}

--
Jim S

Replies