How do I make an html link look like a button?

Question

I'm using ASP.NET, some of my buttons just do redirects. I'd rather they were ordinary links, but I don't want my users to notice much difference in the appearance. I considered images wrapped by anchors, i.e. tags, but I don't want to have to fire up an image editor every time I change the text on a button.

Answer 1

a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

You can play with <a> tags like this if you give them a block display. You can adjust the border to give a shade like effect and the background color for that button feel :)

Answer 2

apply this class to it

   .button {
    font: bold 11px Arial;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
   }

Answer 3

You could create a standard button, then use it as the background image for a link. Then you can set the text in the link without changing the image.

The best solutions if you don't a special rendered button are the two already given by TStamper and Ólafur Waage.

Answer 4

This gets into the details of the css a bit more too, and gives you some images:

http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/