[ Show ]
Support VoyForums
[ Shrink ]
VoyForums Announcement: Programming and providing support for this service has been a labor of love since 1997. We are one of the few services online who values our users' privacy, and have never sold your information. We have even fought hard to defend your privacy in legal cases; however, we've done it with almost no financial support -- paying out of pocket to continue providing the service. Due to the issues imposed on us by advertisers, we also stopped hosting most ads on the forums many years ago. We hope you appreciate our efforts.

Show your support by donating any amount. (Note: We are still technically a for-profit company, so your contribution is not tax-deductible.) PayPal Acct: Feedback:

Donate to VoyForums (PayPal):

Login ] [ Contact Forum Admin ] [ Post a new message ] [ Search | Check update time ]

CSS Buttons (for beginners)
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.

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.
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
color:#3c3c3c; color of text. (all written letters or words).
usually, brownish or blackish colors are the best Text
font-size:12px;Size of Text
padding:2px 8px;
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 {
/* 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.


There are no messages in the main index.

Post a message:
This forum requires an account to post.
[ Create Account ]
[ Login ]
Small variations can make a positive difference.
One example is the thin line which surround the entire box.
Let's choose a Fluorescent Blue color.
And, when your cursor is dragged over the box, we'll change it to baby-blue.

My button: surrounded by fluorescent blue

[ Contact Forum Admin ]

Forum timezone: GMT-8
VF Version: 3.00b, ConfDB:
Before posting please read our privacy policy.
VoyForums(tm) is a Free Service from Voyager Info-Systems.
Copyright © 1998-2019 Voyager Info-Systems. All Rights Reserved.