Mar 6, 2008

link as button

Anchors are inline elements, they only activate when you click on the content of the link. However, there instances when you want to create more of a button like with a larger clickable area. You can do this by setting the display property to block, and then change the width, and height, other properties to create the style and hit area you want.
            a {
            display: block;
            width: 6em;  /* dimensions needed for IE5.x/Win */
            padding: 0.2em;
            line-height: 1.4;
            background-color: #94B8E9;
            border: 1px solid black;
            color: #000;
            text-decoration: none;
            text-align: center;
            }
            /* to rollover */
            a:hover {
            background-color: #369;
            color: #fff;
            }

            /* another example */
            a:link, a:visited {
            display: block;
            width: 200px;
            height: 40px;
            line-height: 40px;
            color: #000;
            text-decoration: none;
            background: #94B8E9 url(images/button.gif) no-repeat left top;
            text-indent: 50px;
            }
            a:hover {
            background: #369 url(images/button_over.gif) no-repeat left top;
            color: #fff;
            }

            /* sometime you can use a combine two image into one, and use it as back-ground
            but changing background-position, you can use different part of the image as the back
            ground */

            a:link, a:visited {
            display: block;
            width: 200px;
            height: 40px;
            line-height: 40px;
            color: #000;
            text-decoration: none;
            background: #94B8E9 url(images/pixy-rollover.gif) no-repeat left top;
            text-indent: 50px;
            }
            a:hover {
            background-color: #369;
            background-position: right top;
            color: #fff;
            }