How To Create Alert Button? A step by step beginner tutorial

What is a Button?

Buttons are the interactive UI element in the websites or web applications that directs website visitor to perform some actions.

For e.g the Login button on the Facebook website allows user to access their account if they have provided the correct credentials. When the user clicks on the Login button action is performed.

In modern websites, there are various types of buttons with a specific purpose. Some of the buttons are Text Buttons, Dropdown Buttons, CTA Buttons, etc. Similarly, these buttons are decorated using various colors, text, and fonts.

In today’s article, we will be discussing how we can create these Text Buttons in our websites using HTML and CSS.

Text buttons are buttons that are presented with a piece of text. These buttons are simple in look and consist of some text, fonts, and background color.

What are Alert Buttons?

Alert Buttons are the UI element that creates awareness regarding the action that the user takes while interacting with the system (Websites or Web Applications).

For e.g. a button with a background color as red and a text Delete represents that when the user clicks on that particular button some information or data will be removed from the system.

Project Overview

In this tutorial, we will create five different buttons each consisting of different colors. Here, these colors are the main factor that creates awareness among the user as these colors have their specific value.

We will use five different colors in our project. These colors are Blue, Red, Orange, Green and Platinum. Here the red color represents that the button with this color should be used responsibly with caution. Blue color represents that the button with these color is trying to convey some information.

Similarly, the Green button can be used if some actions are performed successfully. The Orange button provides a warning to the user while the platinum color will be the default color for the buttons.

I have divided this tutorial into two different section so that it will be easier to understand and user can act accordingly.

Section A covers all the HTML tags and elements. In Section B we will see how we can style those buttons that we created while implementing HTML structure.

Before beginning the coding process let’s make some of the necessary arrangements for our project.

First, create a new folder in your computer drive. Inside this folder create a subfolder with the name style. Once your folder is ready, open the folder inside the code editor. For this tutorial, we will be using Visual Studio Code & Google Chrome. You can download this editor from their official website.

Now open the folder inside the code editor and create a new file with index.html. Similarly, create a file style.css inside the subfolder style.

Section A : Implementing HTML Structure

Inside your index.html let’s create a basic HTML structure of element first.

<!Doctype html>
<html>
    <head></head>
    <body></body>
</html>

Now Inside the head section let’s create a title for our project and link some necessary files.

<title>Alert Button</title>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style/main.css">

Once you are done with the head tag. Let’s work inside the body element. Here we will create a div element with the class name btn-group. Inside this division, elements create five different buttons with their respective class as shown in the code snippets below.

         <div class="btn-group">
            <button class="btn primary">Primary</button>
            <button class="btn success">Success</button>
            <button class="btn warning">Warning</button>
            <button class="btn danger">Danger</button>
            <button class="btn default">Default</button>
        </div>

Now open the index.html file in your browser, you will see HTML button elements being displayed in your screen.

In the code snippets below I have provided the full source code for creating buttons in HTML. You can use that code too.

<!DOCTYPE html>
<html>
    <head>
        <title>Alert Button</title>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style/main.css">
    </head>
    <body>
        <div class="btn-group">
            <button class="btn primary">Primary</button>
            <button class="btn success">Success</button>
            <button class="btn warning">Warning</button>
            <button class="btn danger">Danger</button>
            <button class="btn default">Default</button>
        </div>
    </body>
</html>

Section B : Styling The Buttons

In section B we will implement cascading stylesheet (CSS) to make our alert buttons presentable. Now we will style the HTML elements that we just created in the index.html file.

Initially we will implement the css property. Different browser such as chrome, safari, firefox etc has their default styles for properties like margin, padding and so on. So we don’t want our design to look different across different browser. To reset the margin & padding you can use this css property.

body{
    margin:0;
    padding:0;
}

Now let’s decorate our div element. To style a class in css we use a period(.) sign followed by a class name and wrap all the properties inside a curly braces as shown below.

The text-align property sends all the button to the center of the browser. Since the button element are sticked on the top we will specify the margin-top property. This property brings the button element 50px down from the current position.

.btn-group{
    text-align: center;
    margin-top: 50px;
}

Now let’s design all the buttons. You can use the code from the snippets below.

.btn{
    border: none;
    padding:14px 28px;
    color: #fff;
    font-size: 16px;
    transition: 0.8s;
    font-family: 'Roboto', sans-serif;
}

Once we’ve finished decoration the button we will specify different color to each individual buttons. You can use the code from the snippets below.

.primary{
    background-color: #057bec;
}

.primary:hover{
    background-color: #0e5fac;
}

.success {
    background-color: #4CAF50;
}

.success:hover{
    background-color: #38893c;
}

.warning {
    background-color: #ff9800;
}

.warning:hover {
    background: #e68a00;
}

.danger {
    background-color: #f44336;
}
.danger:hover {
    background: #da190b;
}

.default {
    background-color: #e7e7e7; 
    color: black;
} 
.default:hover {
    background: #ddd;
}

Once you have completed all the code from the above snippets you will see that each individual buttons have specific color. So the snippets below consists of full source code.

body{
    margin:0;
    padding: 0;
}

.btn-group{
    text-align: center;
    margin-top: 50px;
}

.btn{
    border: none;
    padding:14px 28px;
    color: #fff;
    font-size: 16px;
    transition: 0.8s;
    font-family: 'Roboto', sans-serif;
}

.primary{
    background-color: #057bec;
}

.primary:hover{
    background-color: #0e5fac;
}

.success {
    background-color: #4CAF50;
}

.success:hover{
    background-color: #38893c;
}

.warning {
    background-color: #ff9800;
}

.warning:hover {
    background: #e68a00;
}

.danger {
    background-color: #f44336;
}
.danger:hover {
    background: #da190b;
}

.default {
    background-color: #e7e7e7; 
    color: black;
} 
.default:hover {
    background: #ddd;
}

Video Tutorial : How To Create Alert Button Using HTML & CSS?

Conclusion

So in this way we can create alert buttons for our websites and web-applications. This is only the basic tutorial on how we can button elements and decorate it using cascading stylesheet.

An alert button can also be created using an icon. So there are many ways to create an alert buttons. We need to always remember that the main motive of using alerts buttons is to create an awareness among the users. Besides there is always space for the creativity.

If you have any other ways to create alert buttons so please let us know. We will be happy to learn from you as learning is the never ending process. Also if you have any queries regarding any of our article please feel free to inform us.