SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: making a button

  1. #1
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    making a button

    Hey all.

    I just made this style using dreamweaver. My intentions were to make the link look like a button. I missed the mark.

    Is there a way, using CSS to make a link appear to be a button? I'd like to avoid using a graphic

    <code>
    .but { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bolder; text-transform: capitalize; color: #000000; background-color: #FFFF99; height: auto; width: auto}
    </code>

  2. #2
    Happy Holidays !! Paul S's Avatar
    Join Date
    Mar 2001
    Location
    Mexico
    Posts
    1,287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Remove {height: auto; width: auto} and use fixed width and height (ex: width:100px)

    Edit:


    mmm, also this only works with IE 5.X, NN ignore width and height parameters.


    Paul

  3. #3
    Happy Holidays !! Paul S's Avatar
    Join Date
    Mar 2001
    Location
    Mexico
    Posts
    1,287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    for example...

    Code:
    <html>
    <head>
    <style> 
    .but {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #000000; background-color: #FFFF99; width:110px;text-transform: capitalize; } 
    </style>
    <head>
    
    <body>
    
    </body>
      <div class="but">& nbsp;A nice button& nbsp;</diV>
    <html>
    Note: Remove the space between the amperson and "nbsp;"

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.

    That kind of what I had right?
    I guess "height: auto; width: auto" match your text height & width.

    If you leave it out it does the same thing.
    Could I round the edges of the bg using CSS?

  5. #5
    Happy Holidays !! Paul S's Avatar
    Join Date
    Mar 2001
    Location
    Mexico
    Posts
    1,287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by bingymon
    That kind of what I had right?
    I guess "height: auto; width: auto" match your text height & width.If you leave it out it does the same thing.
    yes, IE need a specific width value, "auto" doesn't work.


    Could I round the edges of the bg using CSS?
    mm, I guess no but you can create a border around the text:
    Code:
    <html>
    <head>
    <style> 
    .but {font-family: Verdana, Arial, Helvetica, sans-serif; 
          font-size: 12pt; 
          font-style: normal; 
          font-weight: bold; 
          color: #000000; 
          background-color: #FFFF99; 
          width:110px;
          text-transform: 
          capitalize;
          border:solid;
          border-width:1px;
          border-color:red
          } 
    </style>
    </head>
    <body bgcolor=white>
      <div class="but">& nbsp;A nice button& nbsp;</div>
    </body>
    </html>
    This works in IE 5.5 and NN (4.78)

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks good Paul.

    Thanks!

  7. #7
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    easy way (but doesn't look as good) is to use a form button...

    <form method="post" action="page.html><INPUT TYPE="submit" NAME="whatever" VALUE="whatever"></FORM>

    Sarah

  8. #8
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll give that a bash too. I can then add a style to the button. Thanks Sarah

  9. #9
    Happy Holidays !! Paul S's Avatar
    Join Date
    Mar 2001
    Location
    Mexico
    Posts
    1,287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by bingymon
    Looks good Paul.

    Thanks!
    you're welcome

  10. #10
    Victory shall be mine tubedogg's Avatar
    Join Date
    Mar 2001
    Location
    Medina, OH
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or just use an <input type="button"> like so: (this should work)

    Code:
    <input type="button" onClick="javascript:window.location='newlocation'">
    Kevin


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •