How to create good looking sign up buttons like this one?

That entire box on bbsmiley is done via the Notices. They created that button using CSS, more than likely. You'll see a similar set up on my forum, I can send you the basic coding for it via PM if you'd like. :)
 
Here's one way: Style Properties -> Buttons -> Sign up Button CONTAINER

Remove the background color/image/repeat/position and the padding of (3px default i think)

Inside Sign up button INNER, add this to Misc Extra CSS:

Code:
box-shadow: 0px 2px 5px rgba(0,0,0, 0.2) inset;
background: rgb(143,200,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(143,200,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,200,0,1)), color-stop(100%,rgba(143,200,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#8fc800',GradientType=0 ); /* IE6-9 */

And inside Sign Up Button INNER remove the background color/image/repeat/position as well.

Effect:
signup.webp

You can use this website:
http://www.colorzilla.com/gradient-editor/
for different colors too, and just replace that existing code
 
Here's one way: Style Properties -> Buttons -> Sign up Button CONTAINER

Remove the background color/image/repeat/position and the padding of (3px default i think)

Inside Sign up button INNER, add this to Misc Extra CSS:

Code:
box-shadow: 0px 2px 5px rgba(0,0,0, 0.2) inset;
background: rgb(143,200,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(143,200,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,200,0,1)), color-stop(100%,rgba(143,200,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#8fc800',GradientType=0 ); /* IE6-9 */

And inside Sign Up Button INNER remove the background color/image/repeat/position as well.

Effect:
View attachment 34465

You can use this website:
http://www.colorzilla.com/gradient-editor/
for different colors too, and just replace that existing code
Thanks for a great answer! I tried to follow you instructions and this is what I came up with:

signupbutton02.webp

The link to colorzilla was great and very helpful in creating own custom gradients :)

I'll send it to you in the next couple of days. :)
Great!
 
I found this which was helpful to me: http://www.cssbuttongenerator.com/

This is the code that I managed to generate without any images:

Code:
<a href="#" class="classname">Bli medlem nu!</a>
 
<style type="text/css">
.classname {
-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:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.classname:active {
position:relative;
top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>

Should the code go into extra.css?
 
The bit inside the style tags (excluding the style tags themselves) can go in EXTRA.css, yes. And recommended so the CSS is minified etc.
 
Anything you like really.

Anything that describes what it does. Maybe "joinNowButton" just anything descriptive. Basically anything is better than "classname" :p
 
Top Bottom