A beginner guide to basic button types of HTML and, how to create them?

What is the button?

A Basic button is a component that would use for interacting with the user and UI. On a website, a button is a very important component. In this article, we explain the Basic Button Types and how to create the Basic Button.

On today’s website, there are a lot of designs you have seen that there are different buttons on their website, what these buttons are called? what is the purpose of these buttons? You have a lot of queries in your mind. We promise to you after reading this article you got all the above question’s answer.

Here is the list of basic button

  1. The Fab Button
  2. The CTA Button
  3. The Ghost Button
  4. Toggle Button
  5. The Icon Button
  6. Text Button
  7. Multi-Select Button

1. The Fab button

These are very trendy buttons. You have used this type of button many times button I know many people don’t know that what they are called? These buttons are usually on the right bottom of your viewport. Here we are going to tell you how you can create a fab button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0; padding: 0;box-sizing: border-box;}
        .fabButton{position: fixed; right: 0;bottom: 0; padding: 10px;font-size: 30px; border-radius: 50%;background-color: brown; color: #ffffff;width: 50px;height: 50px; text-align: center; margin: 10px; cursor: pointer;}
    </style>

</head>
<body>
    <div class="fabButton">+</div>
</body>
</html>
Fab Button

2. CTA Button

CTA ( call to action ) buttons are of very high importance on the website. These kinds of buttons help to achieve the primary goal. Like if you want to order from a site the add to cart button or buy now buttons are CTA buttons. This is how the CTA buttons are created.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <style>
        *{margin:0; padding: 0;box-sizing: border-box;}
      
    </style>

</head>
<body>
   
    <div class="container">

        <div class="card" style="width: 18rem;">
            <img src="https://picsum.photos/seed/picsum/200/300" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
</body>
</html>

in the above example, we have used bootstrap for creating a cta button u can also create yours. You just need to highlight your cta button. Remember that the cta button is extra focused on others. Sometimes we just put a single button for cta.

CTA Button | Basic Button
CTA BUTTON

3. Ghost Button

The ghost button goes with cta button. this kind of button looks like it that you don’t want to click. You have seen these buttons beside of cta button. They are not focused like cta button. You just need to put it very simple no highlit no focus. Put them simple as you can. The ghost button is created like this. Here I am using bootstrap again for creating a ghost button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <style>
        *{margin:0; padding: 0;box-sizing: border-box;}
      
    </style>

</head>
<body>
   
    <div class="container">

        <div class="card" style="width: 18rem;">
            <img src="https://picsum.photos/seed/picsum/200/300" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <div class="btn-group" role="group" aria-label="Basic example">
                   
                    <button type="button" class="btn btn-primary">CTA Button</button>
                    <button type="button" class="btn">Ghost Button</button>
                  </div>
            </div>
        </div>
    </div>
</body>
</html>
Ghost Button | basic button
Ghost Button

In the above example, we just use a simple button. Which is not look like that you must have clicked on it. This button helps you to click.

4. Toggle Button

The toggle button is used when you have two situations such as ON/OFF. The first toggle button was used on iPhone. If you have two related options use the toggle button there. In below code, we will describe how to create a toggle button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <style>
        *{margin:0; padding: 0;box-sizing: border-box;}
        .toggleBtn {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggleBtn input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.toggler {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .2s;
}

.toggler:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  border-radius: 5px;
  background-color: white;
  transition: .2s;
}

input:checked + .toggler {
  background-color: #f39821;
}



input:checked + .toggler:before {
   transform: translateX(26px);
}
    </style>

</head>
<body>
   
    <label class="toggleBtn">
        <input type="checkbox">
        <span class="toggler"></span>
      </label>
    
</body>
</html>

5. The Icon Button

The icon button is one of my favorite Basic buttons. This button saves space for a large number of screens due to this we used these buttons on our website. You have seen this button on many sites. This button used to show your data in a list view. You can find the code below on how to create them.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <link rel="stylesheet" href="css/style.css" /> -->
    <style>
        *{margin: 0;padding: 0;}
        body{line-height: 24px;}
        .container{
            width: 100%; height: auto;  overflow: hidden;
        }
        .container > ul > li{width: calc(33.3% - 4em ); float: left; list-style: none;margin: 1em;padding: 1em; border: 1px solid #ccc;}
        a{display: block; color: #333333; text-decoration: none;}
        img{width: 100%;}
        
        .container ul li div{width: calc( 100% - 180px);padding-right: 10px; font-size: 16px; letter-spacing: 1px; line-height: 24px;}
        .container ul li div:nth-child(even){width: calc(100% - 230px); padding-right: 0 !important;}
        .decline{background: transparent;}
       
        .container > ul > li ul li{padding: 10px; list-style: none;}
        .left{float: left;}
        .right{float: right;}

    </style>
  </head>
  <body>
    <div class="container">
        <ul>
            <li>
                <div class="left"><img src="images/mahi-1.jpeg" alt="" ></div>
              <div class="left"> <a href="#"><h3>Lorem Ipsum </h3>
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
               </div>
            </li>
            <li>
                <div class="left"><img src="images/mahi-1.jpeg" alt="" ></div>
              <div class="left"> <a href="#"><h3>Lorem Ipsum </h3>
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
               </div>
            </li>
            <li>
                <div class="left"><img src="images/mahi-1.jpeg" alt="" ></div>
              <div class="left"> <a href="#"><h3>Lorem Ipsum </h3>
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
               </div>
            </li>
            <li>
                <div class="left"><img src="images/mahi-1.jpeg" alt="" ></div>
              <div class="left"> <a href="#"><h3>Lorem Ipsum </h3>
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
               </div>
            </li>
            <li>
                <div class="left"><img src="images/mahi-1.jpeg" alt="" ></div>
              <div class="left"> <a href="#"><h3>Lorem Ipsum </h3>
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
               </div>
            </li>
            <li>
                <div class="left"><img src="images/mahi-1.jpeg" alt="" ></div>
              <div class="left"> <a href="#"><h3>Lorem Ipsum </h3>
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
                <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> 
               </div>
            </li>
           
        </ul>
    </div>

  </body>
</html>
Icon button

In the above example, the text is working as a Basic button. When u put your cursor on the text your cursor will be turned into a pointer and you can click. This button saves a lot of time and screen space.

6. The Text Button

The text button is just a simple link. We have to use this kind of basu button when action is not so necessary. They could be placed in your site anywhere even us can use them inside a paragraph. Must remember, that these button should look different from your common text. Just like you can set deferent color size and all.

7. The Multiselect Button

The multiselect button enables one to choose multiple options at a time. This kind of Basic button is generlly used in text editor Like Bold, Italic, and Underline.

Hope this article will defiently help you to understand the basic concept of basic buttons. Now choose your button According to your use.

Also read :- Basic Principle of Creating a great site

Leave a Comment