Help with simple looking buttons

Discussion in 'Web Design and Development' started by SchneiderMan, Nov 27, 2009.

  1. SchneiderMan macrumors G3

    SchneiderMan

    Joined:
    May 25, 2008
    Location:
    Apple state
    #1
    I really want to make a simple looking button with color changing rollover like http://engadget.com has.

    Is it easy to make? I do not know any coding. Thanks
     

    Attached Files:

  2. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #2
    For my button i style them with css. These are from a tutorial i found if it is what you are looking for. Though for this example its a button i change colour when the user enters the required data for my forms.
    Try it out then mess around with the CSS to your liking.

    HTML
    HTML:
    <div class="buttons">
        <button type="submit" class="positive">Save</button>
    </div>
    
    CSS
    HTML:
    /* BUTTONS */
    
    #buttonBox 
    {
    	margin-top: 0.8em;
    	margin-left: 0.2em;
    	float: left;
    	width: 100%;
    }
    .buttons a, .buttons button{
        display:block;
        float:left;
        margin: 0 7px 0 0;
        background-color:#f5f5f5;
        border:1px solid #dedede;
        border-top:1px solid #eee;
        border-left:1px solid #eee;
        font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
        font-size:100%;
        line-height:130%;
        text-decoration:none;
        font-weight:bold;
        color:#565656;
        cursor:pointer;
        padding:5px 10px 6px 7px; /* Links */
    }
    .buttons button{
        width:auto;
        overflow:visible;
        padding:4px 10px 3px 7px; /* IE6 */
    }
    .buttons button[type]{
        padding:5px 10px 5px 7px; /* Firefox */
        line-height:17px; /* Safari */
    }
    *:first-child+html button[type]{
        padding:4px 10px 3px 7px; /* IE7 */
    }
    .buttons button img, .buttons a img{
        margin:0 3px -3px 0 !important;
        padding:0;
        border:none;
        width:16px;
        height:16px;
    }
    
    /* STANDARD */
    
    button:hover, .buttons a:hover{
        background-color:#dff4ff;
        border:1px solid #c2e1ef;
        color:#336699;
    }
    .buttons a:active{
        background-color:#6299c5;
        border:1px solid #6299c5;
        color:#fff;
    }
    
    /* POSITIVE */
    
    button.positive, .buttons a.positive{
        color:#529214;
    }
    .buttons a.positive:hover, button.positive:hover{
        background-color:#E6EFC2;
        border:1px solid #C6D880;
        color:#529214;
    }
    .buttons a.positive:active{
        background-color:#529214;
        border:1px solid #529214;
        color:#fff;
    }
    
    /* NEGATIVE */
    
    .buttons a.negative, button.negative{
        color:#d12f19;
    }
    .buttons a.negative:hover, button.negative:hover{
        background:#fbe3e4;
        border:1px solid #fbc2c4;
        color:#d12f19;
    }
    .buttons a.negative:active{
        background-color:#d12f19;
        border:1px solid #d12f19;
        color:#fff;
    }
    
     
  3. SchneiderMan thread starter macrumors G3

    SchneiderMan

    Joined:
    May 25, 2008
    Location:
    Apple state
    #3
    Thank you very much, but i have no idea what to do with the code lol
    Im also using iWeb.
     
  4. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #4
    I have never used iWeb so i can't help you there, i believe you are limited to using only the functions it provides and have no control on the code that builds up the page.
     

Share This Page