www.webdeveloper.com
Results 1 to 8 of 8

Thread: Controlling button size, background color, etc?

  1. #1
    Join Date
    Jul 2006
    Posts
    25

    Controlling button size, background color, etc?

    I have a very simple button that I insert into very simple html
    to get the reader back to the table of contents at the top of page.

    <form action="#top" method="get">
    <button type="submit">Top of page</button>
    </form>

    How do I set the button size, its background color,
    text color, and text size?
    Last edited by lprag; 08-02-2006 at 06:07 PM. Reason: clarification

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,324
    Use CSS styling, preferably by assigning an ID or class to the button element and then styling it in your stylesheet. (But you can do it with in-line styling using the style="..." attribute.)
    HTML Code:
    <button type="submit" id="mysubmit">Top of page</button>
    Stylesheet:
    Code:
    #mysubmit {
      width: 7em;
      background-color: #ccffff;
      font-size: 110%;
      font-weight: bold;
      /* etc., etc., and so forth */
    }
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Jul 2006
    Posts
    25

    A couple of questions ...

    [QUOTE=NogDog]Use CSS styling, preferably by assigning an ID or class to the button element and then styling it in your stylesheet. (But you can do it with in-line styling using the style="..." attribute.)

    Hello,

    Thank you.

    The below in-line styling works fine.

    A couple of questions:

    How does one specify the actual font point size?

    No matter what I do to "font-size: 10%;"
    the point size remains the same.

    Also, where can I look to find all the specifications
    that I can include within #mysubmit {.....} to control
    the button configuration?

    <form action="#top" method="get">
    <button type="submit" id="mysubmit">TOP</button>
    <style type="text/css">
    <!--
    #mysubmit {
    width: 10em;
    background-color: #f0c497 ;
    font-size: 10%;
    font-weight: regular;
    color: #000000;
    }
    -->
    </style>
    </form>

  4. #4
    Join Date
    Aug 2006
    Posts
    167
    no, no, no the <style type="text/css"> should be within your head section. and if you don't want the font-size to be in %, you can try pxs like 12px etc. default should be 16 depending on your browser.

    besides if you only want to link to the page anchor, there is no need for a form actually. you can try this:
    HTML Code:
     <input type="button" onclick="window.location='#top';">
    ______________
    __________

    ______________
    __________

    ______________
    __________

  5. #5
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Quote Originally Posted by pacerier
    HTML Code:
     <input type="button" onclick="window.location='#top';">
    Except that will not work a good bit of the time. Best to use a form.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  6. #6
    Join Date
    Jul 2006
    Posts
    25

    Button now fine but now have reload problem ..

    Quote Originally Posted by pacerier
    no, no, no the <style type="text/css"> should be within your head section. and if you don't want the font-size to be in %, you can try pxs like 12px etc. default should be 16 depending on your browser.

    besides if you only want to link to the page anchor, there is no need for a form actually. you can try this:
    HTML Code:
     <input type="button" onclick="window.location='#top';">
    Hello,

    Thanks. I moved style type to the head (I'm new to using style)
    and this button form now works fine in the body:

    <form action="#top" method="get">
    <button type="submit" id="mysubmit">TOP</button>

    The only problem is it forces an actual reload of the page and my old way with a text link "<a href="#top">Top of page</a>" doesn't force a reload.

    The problem with a reload is 1) it activates my vistor counter on each reload and 2) it noticeably slows down getting back to the top of page, as I have some jpgs on the page that are also forced to refresh.

    Thus next question:

    Is there a way to write the button form action so it does not reload?

    Your suggestion for:
    "<input type="button" onclick="window.location='#top';">"

    does solve the problem but I can't figure out how to control the button size, add text to the buttom, change background color, etc., as I can do with style type.

  7. #7
    Join Date
    Aug 2006
    Posts
    167
    you could add text to the button be specifying its value say:
    HTML Code:
    <input type="button" value="Your Text">
    if im not wrong, the button size is reliant on the font-size of the text of the button. try this:
    HTML Code:
    <input style="font-weight:bold; font-size:11px; background:yellow; border:1px solid blue; color:green;" type="button" value="Your Text" onclick="window.location='#top';">
    modify the colors and sizes to your liking.
    ______________
    __________

    ______________
    __________

    ______________
    __________

  8. #8
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Either use:

    <form action="#top" method="get">
    <[b[input[/b] type="submit" id="mysubmit" value="TOP"></form>

    or

    <button><a href="#top">TOP</a></button>

    The mix of half one way and half the other wont work.
    Stephen

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles