• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

Geoffrey

Active member
#2
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. :)
 
#3
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. :)
That would be very helpful. It will give be a base to start tweaking with :)
 

Russ

Well-known member
#4
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.png

You can use this website:
http://www.colorzilla.com/gradient-editor/
for different colors too, and just replace that existing code
 
#6
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.jpg

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!
 
#9
This is the new result...

button.jpg

How do I alter the CSS so that I get the bottom part of the button farther away from the bottom of the sidebar container?
 
#12
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?
 

Chris D

XenForo developer
Staff member
#13
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.
 

Chris D

XenForo developer
Staff member
#15
Anything you like really.

Anything that describes what it does. Maybe "joinNowButton" just anything descriptive. Basically anything is better than "classname" :p
 
#16
But still I must reference the sign up-element in the template to apply the css style? I mean something like this:

Code:
.xenForoSkin .mceSplitButton a.mceOpen {