Home/ Questions/Q 8427377
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T04:46:03+00:00

I’d like to style buttons and links to look the same and in general

  • 0

I’d like to style buttons and links to look the same and in general I’ve done this. But I can’t make button and link look absolutely the same:

  • I set height of button to 25px, but it doesn’t have 25px height, Firebug and Chrome shows 21px;
  • The same for width: it’s 4 pixels smaller than I set;
  • Link has some strange margins around, while button doesn’t, but I set margin to 0.

Sounds insignificant, but when button and link are placed together, it’s easily noted as bug in design (I added red lines where layout is broken). Login button is real button that submits form, and Register is a link to register page that looks like a button.
misaligned

Here Login button is 106×21 px, Register link is 110×25 px.

Here are my styles:

a.button,
button {
    display: inline-block;
    width: 110px;
    height: 25px;
    padding: 0;
    margin: 0;
    color: white;

    background: #7dbedb; /* Old browsers */
    background: -moz-linear-gradient(top,  #7dbedb 0%, #95c3ea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7dbedb), color-stop(100%,#95c3ea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #7dbedb 0%,#95c3ea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #7dbedb 0%,#95c3ea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #7dbedb 0%,#95c3ea 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #7dbedb 0%,#95c3ea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dbedb', endColorstr='#95c3ea',GradientType=0 ); /* IE6-9 */

    text-shadow: 1px 1px 1px #757575;
    filter: dropshadow(color=#000000, offx=1, offy=1);

    border: 2px solid #79cee6;
    border-radius: 2px;
    text-align: center;
    text-decoration: none;
}

Usage:

<form ...>
    ...

    <button>Login</button>
    <a href="..." class="button">Register</a>
</form>

In two words: I can’t make <button> and <a> look perfectly the same.

PS. I know I can use button everywhere with onclick event. As well as make all submit buttons as links with onclick event. But I wouldn’t like to do this so no js will be required to submit a form or follow a link.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Buttons (and other inputs) don’t follow the block model.

    In order to adjust the size of a button, you may :

    • use a padding in the button
    • set box-sizing: content-box; to force the button to use the standard model

    For the second solution, you may have to use the whole set of equivalent declarations :

    a.button,
button {
    ...
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

    EDIT :

    a problem in adjusting this is that different browsers have different buttons.

    So this works in Chrome/ubuntu : http://jsfiddle.net/HAB6W/

    this works in FF/ubuntu : http://jsfiddle.net/Z5H5u/

    I’m not sure it’s a good idea to trying to get a precise look of a button. I know I use only standard elements (usually span) for buttons when I want to have a pixel-precise style.

    NEW EDIT :

    This may be useful : input type=submit text vertical alignment in Firefox

    • 0