VoyForums: CSS Buttons: Tutorial

Test button My button My button2

If you're inputting CSS Code combinations onto Voy forums,
the My Buttons (or, Test Button) can be placed in the Header.
Header:

In addition to the above Buttons,
the following CSS Code can be placed in either the header, or Footer.
[of course, both are needed to create your CSS Button].
But, if dozens of My Buttons are needed in the header,
it's possible to save space by inputting the entire style-type code into the footer.
Footer: Let's analyze portions of the above CSS Code.
First, the button must have a Name.
This CSS button is simply called cn.
You'll notice:
This namesake is used 3 times. (two additional times near the end).
So, when creating another CSS button type; these 3 locations will identify your Button's Title.
(replace .cn with another choice).

(There are some features which won't be closely examined; such as shadows.
Next, the background color is the entire color shaded in the CSS Button.
in this case, we're using a light baby-blue.
Of course, a different color can be chosen. (The #F2F7FF is an example of HTML Color code.)

There are 3 border-radius choices, which determine whether the CSS Box is circular or square.
(You'll notice: similar numbers 11px were used for all 3 [instead of choosing unique alterations].
If the numbers 0 are used; it will create a square button.

The Border:1px solid #dcdcdc Is the thin line which surrounds the CSS button.
It seems insignificant, but using a darker line will sharpen the entire button. (try #000000).
(although, I've chosen a less pronounced color.)

The most important feature is choosing Color of Text
(all visible words inside the CSS Button)
Color choices are dark brownish, dark grey, or soft black.

the font-size will increase the size of Text.

the padding: 2px 8px perfectly sizes the button, in terms on height & width.

background-color:#BCB2A7 is the changing color-shade when the cursor highlights each CSS button.
(I've chosen a somewhat tacky darkish grey). [obviously, these numbers can be changed.]
{an HTML color-mixer or Generator is recommended}

here's the Buttons which we've named .cn
( CSS buttons are given a distinct namesake)

-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#F2F7FF; primary color inside box
-moz-border-radius:11px; higher number increases roundness of box
-webkit-border-radius:11px; increases roundness of box
border-radius:11px; increases (or decreases) roundness of box
border:1px solid #dcdcdc;
This is the thin line which surrounds box
display:inline-block;
color:#3c3c3c; color of text. (all written letters or words).
usually, brownish or blackish colors are the best Text
font-family:arial;
font-size:12px;Size of Text
font-weight:bold;
padding:2px 8px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.cn:hover {
background-color:#BCB2A7; color when hilighted.
(when cursor is dragged over the CSS button, the button's color then changes)
}.cn:active {
position:relative;
top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */

The namesake "CN" appears 3 times within our above code.
you'll also notice: the My Button code uses the same CN name..
Plus, each
http://www.url-here.com/" class="cn">My button2

Finally, here's the same CSS button using a much larger font-size: My bigger button

Here's the same CSS Button, using a darker border:1px solid.
(the little thin line which surrounds the Button) My bigger button

Here's the same CSS Button using a darker primary color, and a 0px border-radius
(which increases or decreases the roundness): My bigger button

background-color:#fCB2A7 is now being altered. (Color When Highlighted).
Now, drag your cursor over the following button: My bigger button

So, hopefully you've learned some basic knowledge of CSS Buttons.
Future instructions will offer less commentary.