Buttons for Slackers

[Ahmed]

This is an easy alternative to making buttons for your forum (new thread, new post, etc.).

Before you go any further, you'll need Wrighty's "Button to Text" code. You can find it at the link below, copy and paste as directed:

forum.sz-ex.com/index.cgi?board=codes&action=display&thread=13871



Don't worry about using the CSS they provided, we'll be using our own CSS.

All you need to do is upload the gradient image, copy/paste the stylesheet below, and follow the guidelines. You can mess around with the settings to get different looks. I'll probably post alternate gradients or different stylings for this later.

The style below is the same used here.

Blue gradient (right click+save image as):


<style type="text/css">
.button {
/* Replace EDIT HERE with gradient url */
background-image: url(EDIT HERE);
background-repeat: repeat-x;

/* Font color; use 6 digit hex code. Do not remove pound sign # */
color: #ffffff;

/* Gives text a '3D' look, use 6 digit hex code. Do not remove pound sign # */
text-shadow: -1px -1px #083758;

/* Border color of button */
border: 1px solid #084874;

text-decoration: none;
font-family: Arial;
font-size: 10px;
font-weight: bold;
display: inline-block;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 8px;
padding-left: 8px;
margin: 0px;
}
</style>


Enjoy!

[Lyss]

^{You have saved me many hours of coding and button-making which I never do anyway since I'm lazy. Thank you, Deko, for sharing this wonderful knowledge for lazy people such as me. |D <3}

[/sup]

[Ajay]

I absolutely love this code..with this CSS it's even better.

[Ahmed]

Made a small tweak. This one fixes the alignment and button order problem. Update to the new CSS.

[Ajay]

Ahh ok thanks, I see the fix