SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: CSS button help

Threaded View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Scotland
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS button help

    Hi,

    I've after some help with the below CSS code for a button with mouseover effect.

    CSS:
    Code:
    <style type="text/css">
    <!--
    a.button {
    	font-weight: bold;
    	font-size: 14px;
    	font-family: Arial, Helvetica, sans-serif, Verdana;
    	font-style:italic;
    	padding: 2px 8px;
    	border-top: 2px solid #ffffff;
    	border-right: 2px solid #cccccc;
    	border-bottom: 2px solid #cccccc;
    	border-left: 2px solid #ffffff;
    	text-align: center;
    
    	width: 65px;
    	height: 17px;
    	display: block;
    	margin-right: auto;
    	margin-left: auto;
    }
    a.button:link { 
    	background-color: #ffffff; 
    	color: #000000;
    	text-decoration: none;
    	}
    a.button:visited {
    	background-color: #ffffff; 
    	color: #000000;
    	text-decoration: none;
    	}
    a.button:hover { 
    	background-color: #ffffff; 
    	color: #cccccc;
    	text-decoration: none;
    	}
    a.button:active { 
    	background-color: #ffffff; 
    	color: #000000; 
    	text-decoration: none;
    	}
    -->
    </style>
    HTML:
    Code:
    <a href="#" class="button">Home</a>
    Basically, the code works fine unless the text size is changed in the browser then the text size increases but the size of the button doesn't with it.

    Is there any way to make the button size increase with the text size? If not then maybe just keep the size it is (em, yes probably not accessible).

    As always any help appreciated!

    Thanks.
    Last edited by zsasz24; Dec 30, 2004 at 17:43. Reason: posted in wrong forum (doh!)


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
  •