Johan Broddfelt
/* Comments on code */

Same size buttons

When styling your own buttons in html pages you sometimes use a <input type="submit"> and sometimes regular tags like a, div, span and button. The problem is that browsers all have their own unique style on the input buttons, which makes it a bit tricky make them all look alike. And even though I believe i succeeded I am not happy with the solution, because it is not one style for buttons but one style for input buttons and tag buttons and then a small correction for tag buttons. There seems to be an extra border on input buttons that make them 2 pixels higher. Have look at the css below and look at the comments, hope this helps you.

<html>
<head>
<style>
.button {
    cursor: pointer; /* make sure you get a hand when hovering the button with a mouse */
    background: none repeat scroll 0 0 #999;
    border: 1px solid #777;
    color: #fff;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.5);
    position: relative;
    display: inline-block; /* This is important for the behaviour of the button */
    font-size: 14px; /* You need to set a fixed font-size, because in some browser buttons have different relative font-size */
    font-family: verdana; /* Some browsers also apply a different font to buttons, so you need to make sure this is the same */
    text-align: center;
    text-decoration: none; /* We do not want the a buttons to underline the text */
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 2px;
    width: auto !important; /* I have my regular input elements styled in a specific width, I do not want that width on my buttons, that is why I reset it to auto here */
    height: 22px; 
    /* Important: Do not use line-height here, instead trust the vertical-align: middle; below */
    vertical-align: middle;
}

/* Height corrections for html-tag-buttons */
a.button, div.button, span.button {
    height: 20px;
    /* Important: Vertical-align does not work here, so we need to set a line-height that is equal to the height */
    line-height: 20px;
}
/* Corrections for input-buttons */
input.button {
    border-radius: 2px; /*Fix for iOS*/
    -webkit-appearance: none !important; /* This is to make the style of the button independent of what OS you are running */
}

/* You can play with the box-shadow and margins below to change the behaviour of the button when havering and clicking */
.button:hover {
    text-decoration: none;
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5);
}

.button:focus, .button:active {
    margin-top: 1px;
    margin-bottom: -1px;
    outline: 0;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.5);
}

/* If you have two buttons side by side, then add some space */
.button + .button {
    margin-left: 3px;
}
</style>
</head>
<body>
<input type="submit" class="button" value="input button">
<a href="" class="button">a-tag button</a>
<div class="button">div-tag button</div>
<span class="button">span-tag button</span>
<button class="button">button-tag button</button>
</body>
</html>

- HTML, button, style

Follow using RSS

<< Logs as a testing tool WS with Basic Auth and REST >>

Comment

Name
Mail (Not public)
Send mail uppdates on new comments
0 comment