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, design
Comment
0 comment