WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] fancy submit buttons

Reply
  Thread Tools Display Modes
Old 21st October 10, 03:36 PM   #1
epictree
WLC Member
 
Join Date: Oct 2010
Posts: 17
Default fancy submit buttons

Hi all,

I am pretty new to css and love to learn alot. For starters I would really like to know if it is possible to make submit buttons looking cool without using javascript.

The reason I ask this is because I have seen quite some websites that use javascript for a lot of vital things including submit buttons, which if javascript is not enabled makes them less accessible for those people.

If anyone has tips, on how to deal with this or how to make a nice submit button using an immage i would love to hear from you.
thank you
epictree is offline   Reply With Quote
Old 21st October 10, 05:11 PM   #2
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: fancy submit buttons

You could take any button image and make it submit on a form without using javascript.

Google "submit buttons" on images.google.com and you'll find a slew of buttons to get your started. Then you need to find a form, or make one.

Ryan.
rkrause is offline   Reply With Quote
Old 22nd October 10, 05:00 PM   #3
sheferd
WLC Member
 
Join Date: Aug 2010
Location: Liverpool (but I'm from the south)
Posts: 40
Default Re: fancy submit buttons

Use:

input[type="submit"]{
background:... ;
}

or give the input a class or id
sheferd is offline   Reply With Quote
Old 22nd October 10, 11:04 PM   #4
epictree
WLC Member
 
Join Date: Oct 2010
Posts: 17
Default Re: fancy submit buttons

Thank you both for your fast respond, and sorry for my late one.
I thought i would receive an email on respond, but it seems i didn't get them.

I am gonna try it out, Thanks a bunch Ill let you know if it worked.
epictree is offline   Reply With Quote
Old 22nd October 10, 11:37 PM   #5
epictree
WLC Member
 
Join Date: Oct 2010
Posts: 17
Default Re: fancy submit buttons

Well i tried the following but it seems it doesn't work anyone have an idea?

Code:
<style type="stylesheet">
        .submit{
            background-image:url('../images/submit.png');
            background-repeat: no-repeat;
            }
    </style>


</head>
    <body>
     
      <form action ="#" method="post">
         <input class="submit" type="submit" name="submit" value="send data" />
      </form>
    </body>
</html>
It only shows a very little part of the image

Last edited by epictree; 22nd October 10 at 11:53 PM.
epictree is offline   Reply With Quote
Old 22nd October 10, 11:53 PM   #6
Corvidae
WLC Member
 
Join Date: Oct 2010
Posts: 2
Default Re: fancy submit buttons

Here is something I use to style my buttons:

Code:
.form input.submit { 
   margin:0;
   font-family:Arial, Helvetica, sans-serif;
   font-size:13px;
   color:#525252;
   background:url(/images/button-bg.gif) repeat-x; 
   border:1px solid #ADADAD;
}
then for the HTML:

Code:
<input type="submit" id="submit" name="submit" class="submit" value="Save Changes"/>
Corvidae is offline   Reply With Quote
Old 22nd October 10, 11:55 PM   #7
epictree
WLC Member
 
Join Date: Oct 2010
Posts: 17
Default Re: fancy submit buttons

Oh wow thank you very much for this.
I am gonna test it out. Thanks for sharing this.
epictree is offline   Reply With Quote
Old 23rd October 10, 12:51 AM   #8
epictree
WLC Member
 
Join Date: Oct 2010
Posts: 17
Default Re: fancy submit buttons

Hi all, I just played around a bit more with the background image and i ended up with the following which is working. IF anyone can use this i would be pretty happy

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>fancy submit button</title>
    <style type="text/css">
        .submit {
           background:url("submit.png") no-repeat;
           width:116px; /* width and height of the image */
           height:53px;
           border: none; /* remove the default border the submit button seems to have */
        }
    </style>

</head>
    <body>
     
      <form action ="#" method="post">
         <input type="submit" id="submit" name="submit" class="submit" value=""/>
      </form>
    </body>
</html>
epictree is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:38 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.