Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Sizing Buttons

  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    61
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Sizing Buttons

    :| I cant figure out how to resize my buttons...

    <input type="button" onclick="disp_alert()" value="Display alert box" />

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,500
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts
    Sort of a vague question, because there are submit buttons that can
    be graphic or browser created ... and then you can use CSS too:

    http://www.google.com/search?q=css+f...ns&btnG=Search

    And then, not sure if you mean buttons that are within forms,
    submit buttons, or buttons that don't need to be in forms.

    http://www.google.com/search?q=css+s...rch&hl=en&sa=2

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    61
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Srry,

    its a button thats inside a table
    The button just brings up an alert box

    Its not in a form, not a submit button either

  • #4
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Try

    Code:
    <input type="button" size="30" onclick="disp_alert()" value="Display alert box" />
    Change the size number to make it longer/shorter.

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    61
    Thanks
    10
    Thanked 0 Times in 0 Posts
    nope size doesnt do anything.

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by nathan130 View Post
    nope size doesnt do anything.
    try css:

    http://www.webreference.com/programming/css_stylish/

    best regards

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Agreed, CSS is a good helper with this issue. Here is an example for the CSS file or else for style code to plop into your header:

    Code:
    input.button2
    {
    font-weight: bold;
    width: 2.5em;
    color:#000000;
    font: bold 84% 'trebuchet ms',helvetica,sans-serif;
    background-color:#002136;
    border: 1px solid;
    border-color: #999999 #999999 #999999 #999999;
    filter:progid:DXImageTransform.Microsoft.Gradient
    (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#002136');
    /*ffeeddaa*/
    }
    
    input.button2_hover
    {
    font-weight: bold;
    width: 2.5em;
    color:#000000;   
    font: bold 84% 'trebuchet ms',helvetica,sans-serif;   
    background-color:#002136;   
    border: 1px solid;   
    border-color: #999999 #999999 #999999 #999999;   
    filter:progid:DXImageTransform.Microsoft.Gradient   
    (GradientType=0,StartColorStr='#002136',EndColorStr='#ffffffff');
    }
    The red parts would be operative and you would of course want to match sizes between your standard and "mouseover" buttons to avoid a strobe effect when your user tries to use the button. You can use "em" "px" or "%" for the button size.

    Then you'd toss this into your body where you want the button to be:

    Code:
    <input class="button2" type="button" onClick="disp_alert()" value="Display alert box" onmouseover="this.className='button2_hover'" onmouseout="this.className='button2'" />
    Is this what you're looking for or have I misunderstood you?

  • #8
    New Coder
    Join Date
    Nov 2008
    Posts
    24
    Thanks
    0
    Thanked 1 Time in 1 Post
    Is it a background image that looks like a button with a text link over it?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •