My technical writing journey

How to Create the Youtube SUBSCRIBE Button With HTML and CSS

Victoria Lazarus's photo
Victoria Lazarus
·

6 min read

Table of contents

Are you new to software development? Let's create the YouTube SUBSCRIBE button with HTML and CSS.

The YouTube SUBSCRIBE button is one of the most popular tools content creators on the channel use to grow their page and build their online community. If you are not familiar with this button, then maybe you just don't watch videos on YouTube (which I find really hard to believe).

Every website, from Google to Amazon, uses a combination of HTML and CSS to get aesthetically pleasing text on their web pages.

In this tutorial, we will learn the step-by-step process of creating the popular YouTube SUBSCRIBE button with HTML and CSS. If you follow this diligently, you can use the knowledge you acquire to create similar buttons on different channels.

Let's get started

Prerequisite

Before we begin, you need to install

  • A Web Browser: to view your website;

  • A Code Editor: to write the HTML and CSS code.

The recommended Web Browser and Code Editor is Chrome and Visual Studio Code. These are the two used in this tutorial.

To install;

  • Go to google.com

  • In the search bar, type VS Code or Google Chrome.

  • Follow the instruction to download and install any of these applications.

Project Setup

To get started with the tutorial, follow the steps below to create a folder in your file manager and open it with VS Code.

  • Open your file manager and create a folder.

  • Go to VS Code;

  • Click file;

  • Select Open;

  • Select the folder you just created;

  • Click Open.

Once open, create two new files inside the folder. To do this, hover over the folder you just opened in the VS Code and click the first + button.

Since we are using HTML and CSS in our project, ensure each file you created ends with.html and .css, respectively. This way, your code editor recognizes that the file is an HTML or CSS file.

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

  • Then, follow the process to install it.

Once the live server extension is installed, when you right-click an HTML document and open with live server, it opens a browser window with the file in it. Any changes you make in the HTML document cause the browser to automatically reload. This makes your work easier as you immediately see if your code is working or not.

  • Open your file with the live server before we start writing our codes.

Easy Steps to Create Your YouTube SUBSCRIBE Button

Now that you have created your folder and opened it with VS Code, the following steps explain the HTML and CSS code that will help us achieve our results. Ready?

  • Open the file ending with HTML;

  • Write the code below.

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

Note: !DOCTYPE html tells the web browser to use the latest version of HTML in presenting your work. Without this, the browser falls back to the older or previous version.

  • Inside the title element, write the title of your folder;

  • inside the body element, write the code

    <button>SUBSCRIBE</button> and save. Here is how your work should appear

The three syntaxes in the above code (<, / and >) fall under the HTML tags mentioned in the first few paragraphs of this tutorial. HTML elements start with <> and end with </> (called opening and closing tags). Both texts and elements in HTML are wrapped with tags.

Inside the Body elements are all texts that are visible on the page. While the Title element defines the title of the main file we are working with. The head, title, and body are all HTML syntax used to structure the HTML code.

If your result is exactly as displayed in the above screenshot, you are on track!

Our next task is to style this HTML text with CSS.

But before this, let's link our HTML file with the CSS. So that we can easily style the structure of our HTML code in the CSS file. Ready?

  1. Give the HTML element a class or an id selector. The class attribute is used to select a specific class for a text or element and often begins with a period. While the id selector begins with a hashtag '#.'

    Although both selectors would achieve the same result, the major difference between them is that the id selector can only apply to one element at a time while the class attribute can be applied to multiple elements.

  2. Our class attribute, in this tutorial, is a subscribe button. As such, our class selector will be .subscribe-button. Write the class selector inside the HTML button element as seen below:

  3. Go to the CSS file and write the class selector. Don't forget that when writing this, it should start with a period.

    In CSS, the word before the curly bracket is the CSS selector. It tells the computer what part of the HTML element we are targeting with the CSS code.

  4. Go back to the HTML file and write the following codes inside the head element:

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

What we have done with the HTML code above is to link this with our CSS file.

  • The link element and syntax linked our HTML to the CSS file. This is why the href carries the name of our CSS file.

    Noticed that, unlike the other HTML elements such as title, body, and head with closing tags, the link element does not require any closing tag. HTML elements like the link are referred to as VOID ELEMENTS.

  • Now, let's go back to the CSS file and write the code below to start changing the aesthetic of our text. We will start with the background color.

      background-color: red;
    • Hover over the color box to choose the right shade of color.

The term "RGB" behind your chosen color represents red, green, and blue. This signifies the amount of red, green, and blue in the color you choose. The highest number for any color in RGB is 255. When you set the three digits to 255, you get a white color; when you change to zero (0), you get a black color.

background color is known as a CSS property. It tells the computer what we are changing. While red signifies the CSS value, which tells the computer what we are changing the property to.

The next few steps are to edit the SUBSCRIBE button you have written to look exactly like YouTube's. To achieve this, write the following CSS code and save it:

color: white; // for text color
border: none; // to remove the border
height: 30px;
width:105px;
border-radius: 2px;
cursor: pointer;

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

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 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. Quite easy, right?

Kindly drop your questions in the comment section.

HTMLCSSSubscribeyoutube