How to Code a Button as a Link in HTML

Upgrade your portfolio with buttons.

Sherry Nance

In this article you will learn how to create a button for your website that will link to another site.  You will also learn how to style the button so you can make it fit with your design using CSS.

One of the easiest ways to make HTML button links is to create an HTML <form> which will generate a button.

form to insert a button generic button

Stopping there would give you a button that could be used on your portfolio, blog, or any other website.   The next step is to design a button that fits int with the look of the rest of your site using CSS code.   There are two ways you can do this.

The first way is to put the styling into the HTML code. This is inline styling.  By adjusting the colors, fonts, sizes, etc. you can customize the button.

form to inline style a button styled button

The second is way to style your button is to use an external style sheet. To use this you will have to start by creating new document and saving it as “.css”.

Next, put the following code into the <head> of your HTML.

connecting to a stylesheet

To link your button to your style sheet you will need to insert class=”MyButton” into your HTML as shown below.

adding a class to HTML

You will then put the following code into you style sheet.  You can adjust the color, size, font, etc. so that it fits in to your vision.

CSS button styling

styled button

In the CSS there is also a way to make the button appear different when it is hovered over.  To do this the following code is put in the CSS style sheet.

HTML button with hover

button on hover

About author
picture of Sherry Nance
Sherry Nance
Sherry Nance is a stay at home mom to three awesome daughters, student of Web Development with MomsCanCo, and home school preschool teacher to her youngest girls. She loves watching her children learn and love that they get to see her learn to do new things as well. Teamwork, organization, and time management play vital roles in balancing her everyday life. Sherry has completed an associates in business management and has a certificate in Web Design. It is her hope to bring Web Development and Design to children someday in a game that would help girls to feel comfortable coding from a young age. She wants to make it so girls feel that they can compete in this field. Outside of her own schooling and adventures in motherhood she loves doing improv comedy, dancing, and cooking. Sherry believes that humor, movement, and good food can cure whatever ails you.

Learn Digital Skills

Find out when the next cohort begins!

The most comprehensive program to up your game in the remote career world.

Learn More