How to Design a Button for Your Website

How did the clickable photo page go? If you are ready to tackle another project, today's post is just for you. This project will be the first project focusing on how to use CSS on a website.

This means you won't be working too much with the HTML and instead be deciding what CSS properties you will be using. Today's tutorial will show you how to design a button on your website only using CSS. This project is from Codecademy's HTML & CSS course.

Here’s how you do it.

Before you start with these steps, you can build your web page for this tutorial any way you like. Codecademy's lesson provides you with some HTML code to show you how this page might use a button on a website. If you want to customize your website a little more for this project, feel free to add more HTML elements. I'm going to use what Codecademy provided in the lesson since the focus is on using CSS than building a web page.

1. Create a button.

We need to create the button in HTML. Inside your HTML tag, make a div tag. Remember to include the closing tag.

You are going to also add a link for your button using the a tag. Inside your div tag, add an a tag with the href attribute going to any URL you want.

2. Add CSS styles for div tags.

Now that we have a closing tag, it is time to go to the style sheet to make it appear on the browser. You are going to set the properties to the div tag as:

div {
 height: 50px;
 width: 120px;
 border-color: #6495ED;
 background-color: #BCD2EE;
}

You also need to include border style and border width, but you can customize the border style and border width to anything you like. Codecademy and I agree by setting our border width to 2px but feel free to play around with the width as you see fit.

When it comes to setting the height and width, this can create problems on some browsers when it comes to testing your code. If you run into this problem during this tutorial, just use command+0 (Mac) or control+0 (PC) to reset your view.

3. Add border-radius property to the div selector.

We are adding the border-radius property to your button so we get the nice rounded corners. We are going to set the border-radius property for our div tag to 5px.

4. Position the button in the middle of the page.

It is time to position our button so it is in the middle of the page. We need to set equal margins for all sides of the element. Equal sides mean the element will be centered. In your style sheet, set the margins to auto.

You will also need to set the text-align property to center your text items. Set the text-align for the button to the center.

5. Style your button text.

Now that we have a button on our page, let’s add style to the text. On your style sheet, your link should have text decoration set to none. You also need to add a color and font family set to pass the Codecademy test, but you can pick any color or font you like.

Now you should have a basic button on your home page.

When you click on the button, it should take you to the website you put in your href attribute. If you have any issues with this step, double-check your tags and properties.

Here is how my code looks on my style sheet. Feel free to look at my code if you get stuck or refer back to the sample project Codecademy provides at the beginning of the lesson.

img {
    display: block;
    height: 100px;
    width: 300px;
    margin: auto;
}

p {
    text-align: center;
    font-family: Garamond, serif;
    font-size: 18px;
}

div {
    height: 50px;
    width: 120px;
    border-color: #6495ED;
    background-color: #BCD2EE;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    margin: auto;
    text-align: center;
}

a {
    text-decoration: none;
    color: green;
    font-family: Arial;
}

Conclusion

Congratulations! You used CSS to make your very own button on a web page. You took a lot of the CSS properties we talked about here on Code Newbie to get our button on the page.

Need another example? I made a sample project on CodePen which shows you what your project should look like when you are done. Feel free to look at my pen to see what I did or just get inspired if you aren't quite sure what to do.

Tomorrow will be another CSS project from Codecademy. This project will show you how to sort your friends using HTML and CSS. You can start working ahead on this project using Codecademy's tutorial now if you want a head start.

This post was originally published on August 16, 2017 on the blog The Original BritishPandaChick as Design a Button for Your Website with Codecademy. I made minor changes to the original post to work here on DEV.

Author's Note on March 27, 2021 - Codecademy announced recently they are making changes to their courses including HTML & CSS. You can learn more about the changes they are making by visiting the link below for Codecademy's post on their blog about the changes they are doing for specific courses.

==> Click here to read Codecademy's blog post about the changes they've made to specific courses!