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.

Example: 
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.

Big Buttons

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”>

big button

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.

Like so:

a {
    display:block;
    width: 150px;
    height: 50px;
    background-color: silver;
    border: 1px solid black;
}

Adding a hover effect to the button is simple:

a:hover {
    background-color: white;
}

Advertisements

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: