Skip navigation
Currently Being Moderated

How do I create a grey keyboard button in CSS?

May 6, 2013 11:50 AM

Tags: #css #css_menu

I'm trying to create a keyboard button for my menu in CSS. I need it to look like a grey space bar on a computer keyboard, basically. Does anyone have any information or direction on how I can do this accurately?

 

Thanks

 
Replies
  • Currently Being Moderated
    May 6, 2013 12:33 PM   in reply to BillyKundalini

    Here's something I whipped up real quick that I think gives you the basics, you can play around with the colors and sizes of the borders to get what you want. Just copy the code into a new html document and play around with the colors in the css (.key li is the "off" version and .key li:hover is the "on mouse over" version)...

     

    <!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=utf-8" />

    <title>CSS TEST</title>

    <style type="text/css">

    body {

        background-color:black;

    }

    .key li {

         list-style:none;

         margin-left:1px;

         float:left;

         height:20px;

         font:bold 12px/20px Verdana, Geneva, sans-serif;

         border-left:4px solid #006;

         border-top:4px solid #09F;

         border-right: 4px solid #009;

         border-bottom: 4px solid #00F;

         background-color: #ffffff;

         border-radius:3px;

         padding:0 5px 0 5px;

    }

    .key li:hover {

         border-left:4px solid #00C;

         border-top:4px solid #09F;

         border-right: 4px solid #00F;

         border-bottom: 4px solid #03F;

         background-color: #C7E2FE;

    }

    </style>

    </head>

     

    <body>

    <ul class="key">

         <li>Something</li>

         <li>Like</li>

         <li>This?</li>

    </ul>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2013 12:31 PM   in reply to BillyKundalini

    Copy & paste this into a new, blank page and play around with the CSS. 

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS Horizontal Menu</title>
    
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    
    <style>
    /* BEGIN Horizontal Navbar */
    nav {
    margin: 0 auto;
    padding: 0;
    width: 900px;  /**adjust width as required**/
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    overflow: hidden; /**float containment**/
    border: 1px dotted red; /**for demo purposes, you may delete this border**/
    }
    nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: auto;
    }
    /**list styles**/
    nav li {
    display: block;
    float: left;
    width: auto;
    line-height: 1em;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 15px;
    text-shadow: 1px 1px 1px #000;
    }
    /**link styles**/
    nav li a {
    display: block;
    padding: 0.5em;
    border: 2px outset #999;
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    background: #CCC;
    }
    
    /**mouseover styles**/
    nav li a:hover, 
    nav li a:active, 
    nav li a:focus { 
    border: 2px inset;
    -moz-box-shadow: inset 0 0 6px #00CCCC;
    -webkit-box-shadow: inset 0 0 6px #00CCCC;
    box-shadow: inset 0 0 6px #00CCCC; }
    /* END Horizontal Navbar */
    </style>
    
    
    </head>
    
    <body>
    <nav>
    nav container
    <ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    </ul>
    <!--end nav--></nav>
    </body>
    </html>

     

    Firefox's Web Developer Toolbar is a must have.  You can edit CSS code directly in your browser and see the changes take place in real time.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points