How to create a new button using HTML

By /
Views: 0

Hey Fellow Coders , So today we are going to know about a very interesting thing which is how can we make a nice button. So In this tutorial we will use HTML and CSS which will help us to make the button .
Here the HTML will define the button and the CSS will be used to add the style . So, Let’s begin .

Step 1 : Write the HTML 

In this step, you create the basic HTML structure and include a button element that you will style later. Here’s a detailed explanation:

HTML File Structure

1.Document Type Declaration :

In this step we are going to declare the type of the of the document in which we are going to do our work . To do that we are just going to write a simple statement that is ‘ <!DOCTYPE html> ‘ .

<!DOCTYPE html>

This declaration defines the document as an HTML5 document. It tells the browser that this is an HTML file and helps it render the content correctly.

2. HTML Tag :

Here , We will add an HTML tag which will represent the root of the HTML document . To do that we just have to add a line in our program that is ‘ <html lang=“en”> ‘ .

<html lang="en">

Here , ‘ <html> ‘  is the root element of the HTML document. All other elements are nested inside this tag. And  ‘ lang=“en” ‘ specifies the language of the document as English. This helps search engines and browsers understand the language of the content.

 3.Head Section : 

In this section we will write the meta information about the document . For this we have to write a set of codes or statement in the program . The description of all the statements are described below ,

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Button</title>
    <style>
        /* CSS styles will go here */
    </style>
</head>

Here ,

  • ‘ <head> ‘ contains meta-information about the document, such as its title and character set.
  • ‘ <meta charset=”UTF-8″> ‘ specifies the character encoding for the document, ensuring that characters are displayed correctly.
  • ‘ <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> ‘ ensures the webpage is responsive, meaning it adjusts its layout to look good on different devices (like phones, tablets, and desktops).
  • ‘ <title>Styled Button</title> ‘ Sets the title of the webpage, which appears in the browser tab.
  • ‘ <style> ‘ This tag will contain CSS styles to define the appearance of elements on the page.

4. Body Section : 

In this section we will describe the body section of the program which contains the main content of the HTML document .  For that we need to write some lines in our program and the description of those lines are as follows .

<body>
    <button class="nice-button">Click Me!</button>
</body>
</html>

Here ,

  • ‘ <body> ‘ contains the main content of the HTML document. This is what will be displayed on the webpage.
  • ‘ <button class=”nice-button”>Click Me!</button> ‘ Creates a button element with the text “Click Me!” and assigns it a class name of ‘ nice-button ‘ . This class will be used to style the button in the CSS.

Complete HTML code : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Button</title>
    <style>
        /* CSS styles will go here */
    </style>
</head>
<body>
    <!-- Button element with class "nice-button" for styling -->
    <button class="nice-button">Click Me!</button>
</body>
</html>
By following these steps, we had created the basic HTML structure and a button element that we can style in the next step. The ‘ button ‘  element is given a class name (nice-button) to apply specific styles using CSS.

Step 2: Add Basic CSS Styles : 

In this step, we will add CSS styles to make the button look visually appealing. CSS (Cascading Style Sheets) is used to define the appearance of HTML elements. Here’s a detailed explanation of each CSS property and how it contributes to styling the button.

This step is done in 3 parts :

  1. CSS for the Entire Page
  2. CSS for the Button
  3. CSS for Hover Effect

Let’s start with the CSS for the Entire page

1.CSS for the Entire Page: 

In this step we are going to design the page in which the button will be placed , Here we will describe about the background color , height, width, font, margin , content placement , etc .

To design the page we need to describe all the components and all the description of the component are described below ,

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

Here,

  • ‘ display: flex; ‘ uses Flexbox layout to position the content. Flexbox makes it easier to align items horizontally and vertically.
  • ‘ justify-content: center; ‘ centers the content horizontally within the container (in this case, the body).
  • ‘ align-items: center; ‘ Centers the content vertically within the container.
  • ‘ height: 100vh ‘ sets the height of the body to 100% of the viewport height, ensuring the content is centered within the visible area of the screen.
  • ‘ margin: 0; ‘ removes any default margin from the body, ensuring the content takes up the full viewport.
  • ‘ background-color: #f0f0f0; ‘ sets a light gray background color for the entire page.
  • ‘ font-family: Arial, sans-serif; ‘ applies a clean, sans-serif font (Arial) to the text on the page.

With all of the the above steps we have made the layout of the entire page and now we will do the CSS for the Button.

2.CSS for the Button : 

In this step we are going to design the button that we are going to create in this step we are just going to define the button such as the border, color, radius , margin , cursor , etc .

To design the button we need to define all the components of the button and we had described all the functions below ,

.nice-button {
    background-color: #4CAF50; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 15px 32px; /* Some padding */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make the container inline-block */
    font-size: 16px; /* Increase font size */
    margin: 4px 2px; /* Add some margin */
    cursor: pointer; /* Add a pointer cursor on hover */
    border-radius: 12px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition */
}

Here,

  • ‘ background-color: #4CAF50; ‘ sets the background color of the button to a shade of green.
  • ‘ border: none; ‘ removes the default border of the button, giving it a cleaner look.
  • ‘ color: white; ‘ sets the text color to white, creating a contrast with the green background.
  • ‘ padding: 15px 32px; ‘ adds padding inside the button, making it larger and more clickable. The values specify the top/bottom and left/right padding.
  • ‘ text-align: center; ‘ centers the text inside the button.
  • ‘ text-decoration: none; ‘ removes any underline from the text (useful if the button is inside a link).
  • ‘ display: inline-block; ‘ Makes the button an inline-block element, allowing it to have both block and inline properties.
  • ‘ font-size: 16px; ‘ sets the font size of the button text.
  • ‘ margin: 4px 2px; ‘ Adds some space around the button.
  • ‘ cursor: pointer; ‘ changes the cursor to a pointer when hovering over the button, indicating it’s clickable.
  • ‘ border-radius: 12px; ‘ rounds the corners of the button, giving it a softer, more modern appearance.
  • ‘ transition: background-color 0.3s ease; ‘ adds a smooth transition effect when the background color changes (e.g., on hover).

Now , We have done with the button part and now we re going to do the CSS for Hover Effect

3.CSS for Hover Effect : 

In this step we are going to change the background color so that a hovering effect will be created for that we need to write few lines in our program and it is described belown,

.nice-button:hover {
    background-color: #45a049; /* Darker green on hover */
}

Here,

  • ‘ .nice-button:hover ‘ This is a pseudo-class that applies styles when the user hovers over the element with the mouse pointer.
  • ‘ background-color: #45a049; ‘ changes the background color to a darker green when the button is hovered over, providing visual feedback to the user.

Now , we are done with the css part and our Button is created successflly .

Entire CSS code : 

<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }

    .nice-button {
        background-color: #4CAF50; /* Green background */
        border: none; /* Remove borders */
        color: white; /* White text */
        padding: 15px 32px; /* Some padding */
        text-align: center; /* Center the text */
        text-decoration: none; /* Remove underline */
        display: inline-block; /* Make the container inline-block */
        font-size: 16px; /* Increase font size */
        margin: 4px 2px; /* Add some margin */
        cursor: pointer; /* Add a pointer cursor on hover */
        border-radius: 12px; /* Rounded corners */
        transition: background-color 0.3s ease; /* Smooth transition */
    }

    .nice-button:hover {
        background-color: #45a049; /* Darker green on hover */
    }
</style>

Full Source Code : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Button</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        .nice-button {
            background-color: #4CAF50; /* Green background */
            border: none; /* Remove borders */
            color: white; /* White text */
            padding: 15px 32px; /* Some padding */
            text-align: center; /* Center the text */
            text-decoration: none; /* Remove underline */
            display: inline-block; /* Make the container inline-block */
            font-size: 16px; /* Increase font size */
            margin: 4px 2px; /* Add some margin */
            cursor: pointer; /* Add a pointer cursor on hover */
            border-radius: 12px; /* Rounded corners */
            transition: background-color 0.3s ease; /* Smooth transition */
        }

        .nice-button:hover {
            background-color: #45a049; /* Darker green on hover */
        }
    </style>
</head>
<body>
    <button class="nice-button">Click Me!</button>
</body>
</html>

Summary : 

In this step, you added CSS styles to make the button look visually appealing. The styles include properties for background color, border, text color, padding, text alignment, font size, cursor, border radius, and hover effects. These styles collectively create a modern, visually appealing button that provides feedback to the user when interacted with.

 

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top