Let us learn a new tag in HTML that is BUTTON.

What are buttons in HTML?

Buttons they are normal buttons which we see in our website.
These buttons are clickable.
They help us to move from one page to another page.
We generally use them in our website for many purposes like: submit form, selecting different buttons, etc..

Genral format of HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

How can we apply buttons?

We can use button tag to apply them in our site.
This tag is used for button in HTML-> <button>Hello</button>.
These buttons help to make our website more user interactive or user friendly.
We have lot of options to make our buttons different from each other.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 20px;
            background-color: black;
            display: block;
        }

        button {  
          background-color: #eaeaea;  
          color: #333333;  
          padding: 10px;  
          border: none;  
          cursor: pointer;  
          transition: background-color 0.3s ease;  
        }  
    </style>
</head>
<body>
    <button>Subscribe me</button>
</body>
</html>

OUTPUT:

Here we can use hover property on hover to make it more beautiful. It can be done like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 20px;
            background-color: black;
            display: block;
        }

        button {  
          background-color: #eaeaea;  
          color: #333333; 
          height: 50px; 
          margin: 40px 60px;  
          cursor: pointer;  
          transition: background-color 3s ease;  
        }  

        button:hover{
            color: aliceblue;
            background-color: red;
            transform: scale(2);
        }
    </style>
</head>
<body>
    <button>Subscribe me</button>
</body>
</html>

Before-

After-

TIPS

We have a lot of more sites that makes our work easier by giving us buttons with beautiful animations which we can use according to our will.

Mostly used site by me for buttons.

This site contains a lot of beautiful buttons with animations that helps to make the site more beautiful.

Lets try different buttons from this website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 20px;
            background-color: black;
            display: block;
        }

        .button {
              all: unset;
              display: flex;
              align-items: center;
              position: relative;
              padding: 0.6em 2em;
              border: mediumspringgreen solid 0.15em;
              border-radius: 0.25em;
              color: mediumspringgreen;
              font-size: 1.5em;
              font-weight: 600;
              cursor: pointer;
              overflow: hidden;
              transition: border 300ms, color 300ms;
              user-select: none;
        }

        .button p {
              z-index: 1;
              color: aliceblue;
        }

        .button:hover {
              color: #212121;
        }

        .button:active {
              border-color: teal;
        }

        .button::after, .button::before {
              content: "";
              position: absolute;
              width: 9em;
              aspect-ratio: 1;
              background: mediumspringgreen;
              opacity: 50%;
              border-radius: 50%;
              transition: transform 500ms, background 300ms;
        }

        .button::before {
            left: 0;
            transform: translateX(-8em);
        }

        .button::after {
            right: 0;
            transform: translateX(8em);
        }

        .button:hover:before {
            transform: translateX(-1em);
        }

        .button:hover:after {
            transform: translateX(1em);
        }

        .button:active:before,.button:active:after {
            background: teal;
        }
    </style>
</head>
<body>
    <button class="button">
        <p>Button</p>
    </button>
</body>
</html>

Before hovering-

After hovering-

Buttons in HTML

Table of contents

What are buttons in HTML?

Genral format of HTML

How can we apply buttons?

Subscribe to my newsletter

Jalaj Singhal

Jalaj Singhal