Question

Hi I’m trying to create a user friendly hyperlink button with the use of XHTML and CSS. I have an unordered-list of list-item hyperlinks, I want to to add a rounded border to these hyperlinks and be able to click anywhere in the button to use the hyperlink functionality.

I currently have in my XHTML file:

<div>
<ul>
<lh>Web Links</lh>
<li><a href="http://www.google.com/">Google</a></li>
</ul>
</div>

and in my CSS:

 div ul li { border:2px solid blue;
          width: 175px;
          height: 40px;
          text-align:center;
          margin: 25px;
          border-radius:10px;
          -webkit-border-radius:10x;
          -moz-border-radius:10px; }

when I add ‘a:link’ to div ul li (div ul li a:link) it puts the border right around the link ignoring the width and height px padding. I have also tryed to use:

a:link  { display: block; 
          width: 8em;
          height: 1.5em;
          background-color:#999999; 
          border-top: 1px solid blue; 
          border-right: 1px solid blue; 
          border-bottom: 1px solid blue; 
          border-left: 1px solid blue; 
          text-decoration: none; 
          color: #000000; 
          cursor: default;
          margin: 25px;
          block-radius:10px;
          -webkit-block-radius:10x;
          -moz-block-radius:10px;}

By using this I acheive decent looking buttons but not the buttons I would like, nor does it round the corners.

Thanks in advance for the help.

Answer 1

You can add this rule, and it will expand the link element to fill the button,

a {
    display: block;
    text-decoration: none;
    height: 100%;
    width: 100%;    
}

Demo at http://jsfiddle.net/7pMHf/