5. Design a Button for Your Website

Design a Button for Your Website

Coding in Style

1. What you’ll be building

You've probably seen all kinds of nifty-looking buttons on your favorite websites that link you to different webpages. In this project, we'll show you how to make your own!

2. Drawing your button

Let's get started! First things first: we'll need to create our button. We'll do this with<div></div> tags.

3. Shaping your button

This involves a new property called border-radius.

4. Positioning your button

1. margin: auto; is the CSS you use to tell the browser: "Hey! Make sure to set equal margins on each side of this HTML element." When the margins are equal, the object is centered.

2. text-align: center; is how you center text elements

5. Adding the link

Now we want to add a link with text to our button.

On the HTML tab:

Add a link (using <a></a> tags) between your <div></div> tags. You can set its href attribute to go to any website, and you can make the link text itself say whatever you want!

On the CSS tab:

Set your link's text-decoration to none. Give it whatever color or font-family you like!

6. It’s alive!

In just a few short steps, you've made a functioning button that will send your website's visitors wherever you'd like them to go.

Feel free to go ahead and play with the settings on your button, such as changing its colors, the font size, or the border-radiusvalue.