www.webdeveloper.com
Results 1 to 6 of 6

Thread: CSS To Build Buttons

  1. #1
    Join Date
    May 2005
    Location
    San Diego
    Posts
    34

    Question CSS To Build Buttons

    I have a question (hopefully the last one) about using CSS to make "Buttons".
    I have the buttons made, and they are working fine. I want to "fine tune" some specific buttons without making redundent CSS classes that have all the same info, except for one changed field.

    I want to make the font on one button a different color in the "normal" state only (as opposed to hover). How can I do this?

    Also, even though I am using the width attribute, the text for one (big word I have to use) button goes "past" the actual button, and when I hover over it, the button then resizes to fit the text thus making the entire button menu look bad. How could I make it so that the text is smaller, but the button stays the same size?

    Thanks, any help would be appreciated. Here is the code I am using.

    a.button:link, a.button:visited, a.button:active
    {
    display:block;
    width:6.5em;
    float:left;
    color: #063AA0;
    background: #CCCCCC center center;
    text-decoration: none;
    text-align:center;
    padding: 0.2em;
    border: 4px solid;
    border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    }

    a.button:hover {
    color: #fff;
    border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
    }

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    try this
    Code:
    <style type="text/css">
    <!--
    a.button {
    	float: left;
    	padding: 0% 1em;
    	line-height: 1.4em;
    	text-decoration: none;
    	border: 4px solid;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bolder;
    }
    a.button:link,
    a.button:visited {
    	background: #CCC;
    	color: #063AA0;
    	border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
    }
    a.button:hover,
    a.button:active,
    a.button:focus {
    	background: #CCC;
    	color: #fff;
    	border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
    }
    -->
    </style>
    Last edited by ShrineDesigns; 06-30-2005 at 04:35 PM.

  3. #3
    Join Date
    May 2005
    Location
    San Diego
    Posts
    34
    That didn't work, but thanks for the help. Each button is inside a table cell, and as soon as I "hover" over the button, it pushes the entire cell out thus messing up the entire table.

    Is there anyway to just change the text size, and nothing else?

    Also, is there anyway to just change the color of one "button" while it is in the normal state?

    Thanks!

  4. #4
    Join Date
    May 2005
    Location
    San Diego
    Posts
    34
    Basically, right now the button size is dependent on the font size. How do I get rid of that dependency so that the buttons stay the same size no matter how small the font is.

    THANKS!

  5. #5
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    try
    Code:
    a.button {
    	float: left;
    	padding: 0% 1em;
    	overflow: hidden;
    	width: 100px;
    	line-height: 1.4em;
    	text-decoration: none;
    	border: 4px solid;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bolder;
    }

  6. #6
    Join Date
    May 2005
    Location
    San Diego
    Posts
    34
    Cool thanks, that overflow-hidden did the trick!

    The only other thing I am wondering is how do I change the color of the text for one "button" when it is in the "link" or normal stage, then to have the same rollover effect as the rest of the buttons when the mouse "hovers" over it.

    THANKS!


    a.button:link, a.button:visited, a.button:active
    {
    display:block;
    width:100px;
    height:30px;
    float:left;
    color: #063AA0;
    background: #CCCCCC center center;
    text-decoration: none;
    text-align:center;
    padding: 0.2em;
    border: 4px solid;
    border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4em;
    overflow: hidden;
    }
    a.button:hover {
    color: #fff;
    border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;

    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles