Skip to main content

How to Create Button using html,css,javaScript

Image
By

 

HTML Explanation

html

<!DOCTYPE html>

<html lang="en">

  • <!DOCTYPE html>: Declares the document type as HTML5.
  • <html lang="en">: Starts the HTML document, specifying the language as English (lang="en").

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

  <title>Button Example</title>

</head>

  • <head>: Contains metadata about the document.
  • <meta charset="UTF-8">: Specifies the character encoding, ensuring correct rendering of text.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the page responsive, ensuring proper scaling on all devices.
  • <link rel="stylesheet" href="styles.css">: Links to an external CSS file for styling the page.
  • <title>Button Example</title>: Sets the title of the webpage, shown in the browser tab.

<body>

  <div class="button-container">

    <button id="myButton" class="custom-button">Click Me</button>

  </div>

  <script src="script.js"></script>

</body>

  • <body>: Contains the main content of the webpage.
  • <div class="button-container">: A container for the button, useful for styling or positioning.
  • <button id="myButton" class="custom-button">Click Me</button>:
    • <button>: Defines a clickable button.
    • id="myButton": A unique identifier for the button, used to target it in JavaScript.
    • class="custom-button": Adds a CSS class for styling.
    • Click Me: The text displayed on the button.
  • <script src="script.js"></script>: Links to an external JavaScript file to add interactivity.

CSS Explanation

css

body {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  margin: 0;

  background-color: #f4f4f4;

  font-family: Arial, sans-serif;

}

  • body: Styles the entire webpage.
    • display: flex;: Makes the body a flex container for easy alignment.
    • justify-content: center;: Centers content horizontally.
    • align-items: center;: Centers content vertically.
    • height: 100vh;: Sets the height to 100% of the viewport.
    • margin: 0;: Removes default browser margins.
    • background-color: #f4f4f4;: Sets a light gray background.
    • font-family: Arial, sans-serif;: Sets the font.

css

.button-container {

  text-align: center;

}

  • .button-container: Styles the container around the button.
    • text-align: center;: Centers text within the container.

css

.custom-button {

  padding: 12px 24px;

  font-size: 16px;

  color: #fff;

  background-color: #007bff;

  border: none;

  border-radius: 5px;

  cursor: pointer;

  transition: background-color 0.3s ease, transform 0.2s ease;

}

  • .custom-button: Styles the button.
    • padding: 12px 24px;: Adds space inside the button (12px top/bottom, 24px left/right).
    • font-size: 16px;: Sets the font size.
    • color: #fff;: Sets the text color to white.
    • background-color: #007bff;: Sets the background color to blue.
    • border: none;: Removes the default border.
    • border-radius: 5px;: Rounds the corners slightly.
    • cursor: pointer;: Changes the cursor to a pointer when hovering.
    • transition: background-color 0.3s ease, transform 0.2s ease;: Smoothly animates background color and button scaling.

css

 

.custom-button:hover {

  background-color: #0056b3;

}

  • .custom-button:hover: Styles the button when hovered.
    • background-color: #0056b3;: Changes the background to a darker blue on hover.

css

.custom-button:active {

  transform: scale(0.95);

}

  • .custom-button:active: Styles the button when clicked.
    • transform: scale(0.95);: Shrinks the button slightly.


JavaScript Explanation

 

 

document.getElementById("myButton").addEventListener("click", function () {

  alert("Button clicked!");

});

  • document.getElementById("myButton"): Selects the button with the id myButton.
  • .addEventListener("click", function () { ... }): Attaches an event listener to the button for a click event.
  • alert("Button clicked!");: Displays a popup message when the button is clicked.

 



Labels:

Comments

Post a Comment

If you have any Doubts plz let me know

Popular posts from this blog

User Registration Form: Purpose, Design, and Code Explanation

By
  Why Do We Need to Create Forms? Forms are essential in web development as they provide a way for users to interact with web applications by submitting data. They are used for various purposes, including: Collecting User Data : For registration, login, feedback, surveys, and more. Enabling Interactions : Allowing users to send information to the server. Dynamic Applications : Forms are key in creating dynamic web applications like e-commerce websites, social media platforms, etc. Improving User Experience : Forms enable tailored content and services by collecting user preferences or queries. Code Explanation HTML The HTML provides the structure of the form and its elements. Here's a detailed breakdown: html .. <div class="form-container"> A container that wraps the entire form, styled with CSS for layout and design. html .. <h1>Sign Up</h1> A heading that indicates the purpose of ...
Post a Comment
Read more

CSS Box Model

By
  CSS Box Model: Comprehensive Guide Overview The CSS Box Model is a foundational concept in web design that governs the layout and spacing of elements on a webpage. It treats every HTML element as a rectangular box, defining how its content, padding, border, and margin interact. Why Do We Need the CSS Box Model? 1.      Precise Layout Control : o     Allows developers to define the exact size and space of elements, including margins, borders, and padding. 2.      Consistency : o     Ensures uniform spacing and layout across different browsers and devices. 3.      Flexibility : o     Adjusts spacing and borders without changing the core content dimensions. Where Do We Need the CSS Box Model? 1.      Website Layout Design : o     Essential for spacing headers, footers, sidebars, and content sections. 2. ...
Post a Comment
Read more

CSS Units

By
CSS Units: Comprehensive Notes What Are CSS Units? CSS (Cascading Style Sheets) units are a way to define the size of elements, spacing, and positioning in a web page. These units provide flexibility to design responsive, visually appealing, and functional layouts. CSS units are used in defining properties such as width, height, margin, padding, font size, and more. Example 1: <style>   div {     width: 100px;     height: 50px;   } </style> <div>Box</div> Here, 100px and 50px define the width and height of the div . Example 2: <style>   p {     font-size: 16px;   } </style> <p>This is a paragraph.</p> The font size of the paragraph is set to 16 pixels using CSS units. Purpose of CSS Units CSS units help define scalable and fixed measurements for web elements, ensuring: Consistency in layout design. Adaptability to differ...
Post a Comment
Read more