please advice a better link button and return false solution

html has link element

<a href="#"></a>

as well as button element

<button></button>

in fact their responsibility are different but... sometimes design want them 开发者_Go百科look the same. I don't any clue to style them look exactly the same, beside reset display, margin, padding, border, background, font etc... they won't look the same at the end and sometimes they screw up each other default positioning attribute.

so my initial solution as below:

example of a link designer want a link look like a button. I wrap a button in a link!

<a href="#"><button class="coolbutton">look cool</button></a>

I like this solution, especially i think a button are a lot easier to style. then the a tag will response to the click and link

now, example of a form : a button for submit the form and a links beside the button. they need to look the same. and the link button shouldn't submit the form. but it is inside the form...

<a href="#"><button class="coolbutton onclickreturnfalse">I just want to link it</button></a>
<button> Submit </button>

the class .onclickreturnfalse are bind to javascript click event to return false anyway. so it won't submit the form... but the problem is.. it return false to the link also.. so the link won't work...

sorry for my poor description and title. I need some opinion now. how a web designer solve these problems?

so i put my CSS here

button,a.bt1,a.bt2,a.bt3{
border: 1px solid rgba(152, 152, 152, 0.1);border-radius: 2px;color: #666666;cursor: pointer;
font-size: 8pt;font-weight: bold;min-width: 54px;padding: 4px 8px;text-align: center;
}
button,button.bt1,a.bt1 { background-color: #F5F5F5; }
button.bt2,a.bt2        { background-color: #F5F5F5; color:#BF0000; }
button.bt3,a.bt3        { background-color: #BF0000; color:#EFEFEF; }
button:hover,a.bt1:hover,a.bt2:hover,a.bt3:hover{
border: 1px solid rgba(208, 0, 0, 0.1); text-decoration:none;
}

seriously... they look a little bit different :(

You should either use a button or an anchor, but I don't see why would you use a button inside a link. You can style the anchor to look as a button or simply use a button and handle the click event.

For example, clicking on this link will not cause a postback (with JS enabled in the browser): <a href="#" class="coolbutton" onclick="alert('test'); return false;" />