Introduction

There are three key technologies for building a website: HTML, CSS, and JavaScript (or another programming language). HTML is used to write the content of the web page and define its structure, CSS defines the style and layout of the web page, and JavaScript makes it interactive.

With only HTML and CSS, the website is static and cannot respond to user interactions. To make a web page interactive, JavaScript is commonly used on the front end, while languages like Python or PHP are used on the back end.

In this tutorial, you will learn the step-by-step process of creating and styling buttons on a web page. This is a simple tutorial for beginner software developers or technical writers. The case study here is the YouTube Subscribe button.

Prerequisite

Below are the required tools you need:

• A web browser to view your website (eg Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari, Opera Mini).

• A code editor to write the HTML and CSS code ( eg Visual Studio Code or VS Code, Vim, Sublime Text, Notepad).

I used Google Chrome and VS Code. If you want to use these same tools and don’t have them, follow the steps below to download and install them.

If you have both tools already installed on your laptop, skip the installation section and go to the next step.

Installation

To download and install Google Chrome:

• Enter google.com in your browser and type How to Install Google Chrome on Your Laptop in the search bar.

• Follow the steps in the first search result.

These steps are captured in the screenshot below.

To download and install VS Code:

• Enter google.com in your browser and type VS Code download for PC in the search bar.

• The first result contains download options for different operating systems, open and select the one for you.

• When the download is completed, if prompted, follow the prompt to install. If not, check your file manager to open the downloaded file, and double-click to start the installation process.

After you have successfully installed both tools, you are ready to start using them for your project.

To complete the tutorial, you would:

1. Create the YouTube Subscribe button with HTML.

2. Style with CSS.

Now let’s start with the first action.

Create the YouTube Subscribe Button with HTML

Follow the steps below to complete this:

Step 1: Create a folder and open it with VS Code

To do this, you will:

1. Create a folder on your laptop.

2. Open VS Code app.

3. In the title area of the VS code, select File.

4. Then select Open Folder.

5. Select the folder you created.

6. Click Open.

A simple shortcut to this is to right-click the folder you created on your laptop and select “Open with Code,” among the options displayed.

Note: A folder acts as a container for all the files and resources related to your project, keeping everything organized. When you open a folder in VS Code, the editor treats it as a "workspace." This allows you to navigate and manage project files easily.

Step 2: Create two files inside the folder you opened in VS Code.

To do this:

1. Hover over the folder you opened in the VS Code and click the first + .

2. Enter the name of your files.

3. Ensure to end each file with a.html and .css respectively. This will help the code editor recognize the files as HTML and CSS files.

Note: Keeping the HTML and CSS codes in a separate file ensures that your codebase is organized. It makes it easier to collaborate with others and debug issues in both HTML and CSS. Later, when you begin styling with CSS, you will learn how to link both files together.

Step 3: Open the HTML file with Live Server

If you don’t have the live server extension in your VS Code, follow the steps below to install it:

1. In your code editor (VS Code), navigate to the Extensions tool and search for live server.

2. See the following screenshot of the live server to install

3. Click install and follow the prompt to run it.

4. Right-click your HTML file and select “Open with Live Server” from the context menu.

5. You can also click the Go Live button at the bottom-right corner of the VS Code window to start the Live Server.

After you have completed the steps above, you are ready to write your HTML code and style with CSS. See how to do this in the next steps.

Step 4: Write the HTML codes

1. Open your HTML file and write the codes below.

<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
</head>
<body> 
</body>
</html>

The HTML codes above represent the basic structure of an HTML document. Let’s break it down:

• The <!DOCTYPE html> declares the document type as HTML5. It tells the browser that the document is to be written in modern HTML.

• The <html> tag is the root element of the HTML document. All other elements are nested inside it. The lang="en" is an HTML attribute that specifies the language of the content (English, in this case). For more information, see HTML Attribute in “Understanding HTML as a Beginner.”

• <title> element sets the title of the web page. This is what appears in the browser's tab and also used as the title in search engine results.

• <head> element contains meta-information (metadata) about the web page. This includes the title of the document and links to external stylesheets (CSS) or scripts (JavaScript).

• <body> element contains the content of the web page that is visible to the user. This is where you would add:

  • Text (e.g., paragraphs, headings).

  • Images.

  • Links.

  • Forms.

  • JavaScript functionality.

  • Interactive elements.

2. Inside the title element, write the title of the HTML file.

3. Inside the body element, write the code

   <button>SUBSCRIBE</button> and save.

4. Check the web page already opened in Live Server to see if the button element you created is displayed.

If you have followed everything up till now, you just learned how to create button elements on a webpage with HTML. The next steps explain how to style the HTML text with CSS.

Styling the HTML Text with CSS

Step 1: Link the HTML file with the CSS file.

1. Give the HTML button element a class selector and write this in the opening tag. See screenshot below

2. Open the CSS file and call the class selector in the HTML file. To do this, start with a period, followed by the name of the class selector and a curly bracket.

   

Note: In CSS, the word before the curly bracket is the CSS selector. It tells the computer what part of the HTML element to target.

Now the HTML and CSS files are ready to be linked together. To do this,

3. Open the HTML file and write the following codes in the HTML head element.

<link rel="stylesheet" href="subscribe.css">

See screenshot below

Step 2: Write the CSS code

Now that you have linked both files, you are ready to begin styling with CSS:

1. Open your CSS file and write the codes below to start changing the appearance of your HTML text.

Note: In CSS, background-color is a CSS property that changes the background color of an HTML element. The selected background color is red because this is the color of the YouTube Subscribe button which is the case study in this tutorial.

background-color: red;

2. Hover over the red color box to choose the right shade of color.

3. Write the following CSS code to make your HTML button look like the YouTube Subscribe button. Make sure to save your code.

color: white; 
border: none;  
height: 30px; 
width:105px; 
border-radius: 2px; 
cursor: pointer;

4. To get the perfect height, width, and radius of your button, keep increasing or decreasing the size until you arrive at the desired result.

5. If you have followed the above steps carefully, here is how your code will appear:

The property and value cursor: pointer changes your mouse to the tiny hand pointer sign you see when you hover around tabs on some web pages.

This is the finished look of our work on Chrome.

If you have followed these steps correctly, You have successfully created a YouTube SUBSCRIBE button with HTML and CSS. With the knowledge from this tutorial, you can create any button on a web page and style the appearance with CSS.

Stay Happy Coding