VoyForums: CSS additional examples

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

CHANGENAME CSS button named CHANGES

my button (named CHIA) my button ( named CG ) my button ( named cim ) my button ( named thid )

<style type="text/css"> .CHANGENAME { -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; increases roundness of box -webkit-border-radius:11px; border-radius:11px; border:1px solid #5cdcdc; thin line surrounds box display:inline-block; color:#3c3c3c; color of text font-family:arial; font-size:11px; font-weight:bold; padding:2px 10px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; }.CHANGENAME:hover { background-color:#A2B9B8; color when hilighted }.CHANGENAME:active { position:relative; top:1px; } /* This imageless css button was generated by CSSButtonGenerator.com */ </style> <style type="text/css"> .CHANGES { -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; increases roundness of box -webkit-border-radius:11px; border-radius:11px; border:1px solid #9a9a9a; thin line surrounds box display:inline-block; color:#3c3c3c; color of text font-family:arial; font-size:11px; font-weight:bold; padding:2px 8px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; }.CHANGES:hover { background-color:#F5E5B0; color when hilighted }.CHANGES:active { position:relative; top:1px; } /* This imageless css button was generated by CSSButtonGenerator.com */ </style> <style type="text/css"> .CHIA { -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:#EDEEEE; primary color inside box -moz-border-radius:11px; increases roundness of box -webkit-border-radius:11px; border-radius:11px; border:1px solid #bbbbbb; thin line surrounds box display:inline-block; color:#3c3c3c; color of text font-family:arial; font-size:13px; font-weight:bold; padding:2px 8px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; }.CHIA:hover { background-color:#E0E8D3; color when hilighted }.CHIA:active { position:relative; top:1px; } /* This imageless css button was generated by CSSButtonGenerator.com */ </style> <style type="text/css"> .cg { -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:#F6F8FB; primary color inside box -moz-border-radius:11px; increases roundness of box -webkit-border-radius:11px; border-radius:11px; border:1px solid #8080A2; thin line surrounds box display:inline-block; color:#334033; color of text font-family:arial; font-size:13px; font-weight:bold; padding:2px 8px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; }.cg:hover { background-color:#E3EAD1; color when hilighted }.cg:active { position:relative; top:9px; } /* This imageless css button was generated by CSSButtonGenerator.com */ </style> <style type="text/css"> .cim { -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:#EDEEEE; primary color inside box -moz-border-radius:9px; increases roundness of box -webkit-border-radius:9px; border-radius:9px; border:1px solid #79799D; thin line surrounds box display:inline-block; color:#3c3c3c; color of text font-family:arial; font-size:13px; font-weight:bold; padding:2px 7px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; }.cim:hover { background-color:#A3BABF; color when hilighted }.cim:active { position:relative; top:1px; } /* This imageless css button was generated by CSSButtonGenerator.com */ </style> <style type="text/css"> .thid { -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:#ededed; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #8A89B0; display:inline-block; color:#333333; font-family:arial; font-size:13px; font-weight:bold; padding:2px 8px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; }.thid:hover { background-color:#E0DDE7; }.thid:active { position:relative; top:1px; } /* This imageless css button was generated by CSSButtonGenerator.com */ </style>

Now, implement your Button.
(Choose one).
(or, you may choose multiple buttons, depending on your preference).
<a href="http://www." class="CHANGENAME" title="">CHANGENAME</a> <a href="http://www." class="CHANGES" title="">CSS button named CHANGES</a> <a href="http://www." class="CHIA" title="add outer text">my button (named CHIA)</a> <a href="http://www." class="cg" title="">my button ( named CG )</a> <a href="http://www." class="cim" title="">my button ( named cim )</a> <a href="http://www." class="thid" title="">my button ( named thid )</a>

I'm choosing the first button.
CHANGENAME CHANGENAME CHANGENAME CHANGENAME CHANGENAME

Subject	Author	Date	Msgs
Important Revision	dr Shannon	09:44:00 09/13/15 Sun	1