Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: CSS buttons

  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post

    CSS buttons

    How can you create those neat, flat buttons? I've seen them on a number of website (none of which I can recall at this moment ). I figure they must be done using CSS, but how? I'd like to know how it's done, and maybe even use the technique myself.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    flat buttons? havent seen them myself but i iimagine it would be buttons with no border....

    border: 0 0 0 0;

    does that help?
    redhead

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    How about these?




    <style>
    .button{width:100; height:20;text-align:center;font-size:10;vertical-align:center;border-top:4px solid #77aa44; border-left:4px solid #77aa44; border-right:4px solid #007700; border-bottom:4px solid #007700; background:#004400}

    .buttonover{width:100; height:20;text-align:center;font-size:10;vertical-align:center;color:#00FF00;border-top:4px solid #77aa44; border-left:4px solid #77aa44; border-right:4px solid #007700; border-bottom:4px solid #007700; background:#006000}

    .buttondown{width:100; height:20;text-align:center;font-size:9;vertical-align:center;color:#00AA00;border-top:4px solid #007700; border-left:4px solid #006600; border-right:4px solid #77aa44; border-bottom:4px solid #77aa44; background:#005000}
    </style>

    <div style="position:absolute; top:80; left:60;cursor:hand;color:white">

    <div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 1</div>

    <div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 2</div>

    <div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 3</div>

    <div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 4</div>

    </div>


  • #4
    Senior Coder
    Join Date
    Nov 2002
    Location
    North-East, UK
    Posts
    1,265
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS buttons

    Originally posted by Grant Palin
    How can you create those neat, flat buttons? I've seen them on a number of website (none of which I can recall at this moment ). I figure they must be done using CSS, but how? I'd like to know how it's done, and maybe even use the technique myself.
    Or if it's Form Buttons that you want then it's a similar process.

    Code:
    <style type="text/css">
    <!--
    input.fancy {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #000000;
    	text-decoration: none;
    	background-color: #CCCCFF;
    	margin: 0px;
    	padding: 2px;
    	height: 25px;
    	width: 100px;
    	border: 1px solid #000000;
    }
    -->
    </style>
    </head>
    
    <body>
    <form name="form1" id="form1" method="post" action="">
      <input type="submit" name="Submit" value="Submit" class="fancy" />
      <input type="text" name="textfield" />
    </form>

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks for those replies. That's kind of what I'm thinking about. The flat buttons I mentioned earlier, http://www.htmlcenter.com/tutorials/index.cfm/main/ has them for navigation buttons. That's where I saw them before. How are those done? Just modify the css for appearance?

  • #6
    Senior Coder
    Join Date
    Nov 2002
    Location
    North-East, UK
    Posts
    1,265
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That site basically uses the same code as Mr J posted.

    Another example
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .out {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	text-decoration: underline;
    	background-color: #CCCCCC;
    	border: 1px solid #000000;
    	text-align: center;
    }
    .over {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFFFFF;
    	text-decoration: underline;
    	background-color: #990000;
    	border: 1px solid #000000;
    	text-align: center;
    }
    -->
    </style>
    </head>
    
    <body>
    <table width="300" border="0" cellspacing="0" cellpadding="0">
      <tr> 
        <td class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">Link 1</td>
        <td class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">Link 2</td>
        <td class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">Link 3</td>
      </tr>
    </table>
    </body>
    </html>

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    So really the only difference is in the css that controls the appearance?

  • #8
    Senior Coder
    Join Date
    Nov 2002
    Location
    North-East, UK
    Posts
    1,265
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yep

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Okay, I guess I'll have to play with the CSS to get the right appearance. Thanks a lot for the help, and the examples.

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Yep ..... just play around with the border and background colours

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,649
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I wouldn't use those....but that's just me.

    You can make a lot nicer buttons with beveled edges, shadow, gradients, images, etc. if you take the time.
    Last edited by zoobie; 11-04-2002 at 12:45 AM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #12
    Senior Coder
    Join Date
    Nov 2002
    Location
    North-East, UK
    Posts
    1,265
    Thanks
    0
    Thanked 0 Times in 0 Posts
    From the link he posted it looks like he was after a navigation bar rather than "buttons".

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Yeah, that "bar" of buttons was what I had in mind, not just single buttons.

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Originally posted by zoobie
    I wouldn't use those....but that's just me.

    You can make a lot nicer buttons with beveled edges, shadow, gradients, images, etc. if you take the time.
    How's that? Images?

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,649
    Thanks
    1
    Thanked 0 Times in 0 Posts
    <input type="image" src="home.gif">
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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