How to Make Button Links with HTML and CSS

By E. Klein | Nov 18, 2011 | 1 Comments | Rating: 0

Tweet

Pin It

Link buttons are used for menus, navigation, shopping carts, and other website features that require visitors to click something. Many websites use button images (in .jpg, .png, or .gif format) to create custom links rather than simple anchor text. The HTML code for the image method looks like this:

However, you can avoid using images altogether by using CSS to make text links look like buttons. All you need to do is add a background color and border to the anchor text. There are two ways of doing this. One way is to simple add the CSS inside the <a> tag. The other way is to create a new CSS class in your external stylesheet, and then reference the class by name inside the <a> tag. The latter method is more efficient if you have many links that you wish to style as buttons.

Method 1: Inline CSS

Use the CSS border, padding, color, text-decoration, and backgroud-color properties to change the appearance of the text by placing them within the <a> tag like this:

The style=" " code is used to indicate inline CSS within HTML tags. In the example above, the color:#008877; attribute makes the text turquoise. The border:1px solid #000000; attribute creates a solid black border that is 1 pixel wide. The padding leaves at least 2 pixels of space between the text and border.  The background-color:#e8e8ff; attribute gives the button a light blue background within the border. Finally, the text-decoration:none; declaration removes the underline from the link.

If you add the code to a webpage, it will create a link button like this:

Read more CSS link tutorials to learn how to customize the appearance of text and links on your websites.

Method 2: Create a new CSS Class

If you don't want to insert the same code inside every <a> tag that begins a button link, create a new CSS class in your external stylesheet (or in the head section of your document between the <style type="text/css"> and </style> tags).  For example, if you call the class "buttonlinks" you would add these lines of CSS code to your style sheet:

color:#008877;

border: 1px solid #000000;

padding:2px;

background-color:#e8e8ff;

text-decoration:none;}

Now add the class declaration to your link like this:

If you prefer link buttons with rounded corners, shading, and other graphic effects, creating your own button images may be an easier solution than using CSS. However, for simple rectangular buttons, CSS will get the job done.

Flag this Article

Flag Type: Spam/Inappropriate/Duplicate Grammar/Spelling/Formatting Flag Severity: 1 2 3 4 5

Reason for flag - be as descriptive as possible

Comments

Dec 2, 2011 12:31am

AuroraWindsor
Nice article. Your directions were easy to understand (even for someone that doesn't do HTML too often).