1. 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?

Discussion in 'Styling and Customization Questions' started by fredrikse, Sep 22, 2012.

  1. fredrikse

    fredrikse Active Member

    Hi,

    I wonder how I can create a good looking sign up button like the on in the picture below (orginally from http://www.bbsmiley.com/)?

    buttons.jpg
     
  2. Geoffrey

    Geoffrey Active Member

    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. fredrikse

    fredrikse Active Member

    That would be very helpful. It will give be a base to start tweaking with :)
     
  4. Russ

    Russ Well-Known Member

    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
     
  5. Geoffrey

    Geoffrey Active Member

    I'll send it to you in the next couple of days. :)
     
  6. fredrikse

    fredrikse Active Member

    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 :)

    Great!
     
  7. ShadyX

    ShadyX Well-Known Member

    Add some padding to that code :)
     
  8. fredrikse

    fredrikse Active Member

    Thanks. I'll try :)
     
  9. fredrikse

    fredrikse Active Member

    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?
     
  10. ShadyX

    ShadyX Well-Known Member

    margin-bottom: 10px;
     
  11. Russ

    Russ Well-Known Member

    Looks like you may of removed the margin on the container, just remove the padding from it not the margin :)
     
  12. fredrikse

    fredrikse Active Member

    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?
     
  13. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
  14. fredrikse

    fredrikse Active Member

    Alright. What element name should I use to tie the element itself and the css code together?
     
  15. Chris D

    Chris D XenForo Developer Staff Member

    Anything you like really.

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

    fredrikse Active Member

    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 {
     

Share This Page