Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Customizing 'Subscribe' Button

Bottom of Page

1 to 9 of 9

  1.  
    •  
      CommentAuthorphloxie
    • CommentTimeJan 26th 2006 edited
     permalink
    Hi everyone,

    This is my first time posting here so hopefully I've done it right.

    I'm re-doing my personal site and I have a mailing list set up. I was wondering if it's possible to replace the 'Subscribe' button with an image I made myself.

    Replace with this:



    I'm using the Notify mailing list and here's the code in case it's necessary:

    <form method=post action="http://members.notifylist.com/edit/joinlist" target="new">
    <input type=hidden name="list_name" value="relish-news" />
    <b>Newsletter Signup</b>: If you'd like to be notified of updates, please enter your email address below.<br />
    <input type=text name="email" value="" /> <br />
    <input name="submit" type=submit value="Subscribe" >

    Any links will be very helpful. Thanks in advance! :)
    •  
      CommentAuthornifkin
    • CommentTimeJan 26th 2006
     permalink
    <input type="image" src="path/to/image.gif" name="submit" alt="OMG SUBMIT BUTTON!" />
    • CommentAuthoryarek
    • CommentTimeJan 26th 2006
     permalink
    You can try this: (for example)

    .button {
    width: 100px;
    height: 50px;
    background-image: url('some/image.gif');
    background-repeat: no-repeat;
    }

    Just try, you can use borders etc :-)
    •  
      CommentAuthornifkin
    • CommentTimeJan 26th 2006 edited
     permalink
    Yarek: The support for trying that (I've been doing it on stuff for the next version of Ekwipment) is spotty at best once you reach the Mac side of things.
  5.  permalink
    Nifkin is using the best supported version of image inputs as of now. However, if you wanted to be elitist, you could just put it as a BG image/FIR it.
  6.  permalink
    I've used this with success (similar to yarek's example):

    .submitButton {
    width: 60px;
    height: 25px;
    padding: 0;
    border: 0;
    background: url(button.gif) no-repeat;
    text-indent: -1000em;
    cursor: pointer;
    cursor: hand; /* for IE 5.x */
    }
    •  
      CommentAuthornifkin
    • CommentTimeJan 26th 2006 edited
     permalink
    to Yarek and Adjustafresh: Have you tested that on safari or the other webkit browsers (shiira, etc.) on the mac? I wasn't able to get it to do anything that wasn't the macos standard button appearance. And negative text-indents on button text didn't work for me somewhere on the PC as well.
  8.  permalink
    nifkin,

    I've tested it on Safari and it works. I seem to recall having some quirky behavior with IE6 (surprise!), but honestly, my brain isn't quite running on all cylinders. I think that if the value attribute is filled in the text shows up on top of the button.
    •  
      CommentAuthorphloxie
    • CommentTimeJan 27th 2006
     permalink
    Thank you Nifkin! Yay for getting rid of that ugly green button. :)

1 to 9 of 9

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page