Skip to main content

How to Create Button using html,css,javaScript

Image
By Prathima

 

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

Counter and its Function/Automation/Industrial Automation/PLC counter

By Prathima
What is counter A counter may be a digital circuit or device that counts the amount of products and returns predefined values supported clock pulse applications. The output of the counter are often wont to count the amount of pulses. The counter circuit is typically composed of several flip-flops connected within the cascade method. Counter automation and digitally based components are very widely used components.      Micro controller applications require external events or precise internal time delay generation and calculation of pulse frequency as required . These phenomena are often utilized in digital systems and automation. Both of those events are often performed by software techniques, but software loops for counting won't give accurate results, as little more important work isn't done. These problems are often corrected by timers and counters in micro controllers that are used as interrupts. Classification of counters In digital circuits, counters ...
Post a Comment
Read more

Latching and Unlatching Circuit Using Ladder Logic

By Prathima
 What is PLC A Programmable Logic Controller, or PLC, is a Micro controller Based Device  used for industrial automation. These controllers can make  automatic  for a specific process, machinery, Home Automation  or even an entire production line. Latching is used in plc as well as hardware circuit to make the circuit in continuously on condition.   Latching Circuit in PLC Generally Latching is a circuit used to keep the output continuously in on Condition. Latching is only applicable for the push button or switches which has spring act. When you are using hardware circuit you can use relay or contactors, these two components is used to make load in on condition. In Below concepts we can understand the concepts of latching and unlatching circuit by using switches   Case1: When you are using Toggle switch, latching is not required. Check in below circuit. In this case toggle switc...
Post a Comment
Read more

What Is SCADA System

By Prathima
SCADA                 Supervisory Control and Data Acquisition or SCADA is an automation control system used in industries such as energy, oil and gas, water power and many more.         The system has a centralized system that monitors and controls the entire country from industrial plants to plant premises.             The SCADA system works by working with signals that communicate through channels to provide the user with remote control of any device in a system.        There are some essential parts composed of highly controllers and monitoring Systems. 1. SCADA system human machine interface or HMI supervisory system remote terminal units 2. RTu  use programmable logic controllers or PLC and communication infrastructure. HMI processes the data and sends it to the human operator. Where they can monitor or control the system.          The supervi...
Post a Comment
Read more