CODEWITHSUNDEEP
cssbutton
demalexx
demalexx

Reputation: 4751

Button size is different that's in styles

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:

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 106x21 px, Register link is 110x25 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.

Upvotes: 3

Views: 6260

Answers (2)

ch2o
ch2o

Reputation: 839

example

a,
input {
    font-family:arial;
    display:inline-block;
    border:1px solid black;
    background-color:blue;
    color:white;
    float:left;

    text-decoration:none;
    font-size:12px;

    **padding:2px 5px;
    height:20px;
    vertical-align:top;

    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -ms-box-sizing:content-box;
    -o-box-sizing:content-box;
    box-sizing:content-box;**
}

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

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

Upvotes: 7

Related Questions