Controlling button size, background color, etc?

[lprag]

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?

[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.)

<button type="submit" id="mysubmit">Top of page</button>

Stylesheet:

#mysubmit {
width: 7em;
background-color: #ccffff;
font-size: 110%;
font-weight: bold;
/* etc., etc., and so forth */
}

[lprag]

[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>

[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:
<input type="button" onclick="window.location='#top';">

[Charles]

<input type="button" onclick="window.location='#top';">Except that will not work a good bit of the time. Best to use a form.

[lprag]

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:
<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.

[pacerier]

you could add text to the button be specifying its value say:
<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:
<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.

[felgall]

Either use:

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

or

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

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