CSS, buttons and links
Buttons have some strange quirks in browsers, and not just in quirks mode:
Browser or OS rendered?
When a button has no border and no background it will be styled as the standard Windows button (in IE) . Similarly so in Firefox. Other browsers do it their own way.
By the way, <button> and <input type=”submit”> is exactly the same to a browser, where the only difference is that a button tag does not have to be embedded in a form, and an input does.
When a button has a border, or a background defined, it suddenly loses it’s standard ‘nice’ appearance and turns into a CSS styled element, just like any other element.
Another quirk you may see sometimes in Internet Explorer is when you make a button very wide. The background image that MS has decided to put on the button has a fixed width, and is stretched to fit the button. This results in a horrendous look.
Example: <button style=”width:300px”>
Making an anchor look like a button
A lot of times buttons are used in places where there should just be a link. Using CSS we can make the link look like a button.
border: 1px solid black;
Adding a hover effect to the button is simple: