Merge pull request Dezenix#111 from geetika005/main

nandini7637 · web-flow · commit cce0c1dda894 · 2022-01-27T14:09:41.000+05:30
Added readme
diff --git a/Buttons/Button_to_email_field/Code/index.html b/Buttons/Button_to_email_field/Code/index.html
@@ -0,0 +1,16 @@
+<!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 rel="stylesheet" href="button_to_email_field.css">
+</head>
+<body class="emailbutton">
+    <div id="button">
+        <button id="emailsub" onclick="sub()"><strong>Notify Me</strong></button></div>
+    <script src="button_to_email_field.js"></script>
+</body>
+</html>
diff --git a/Buttons/Button_to_email_field/Code/script.js b/Buttons/Button_to_email_field/Code/script.js
@@ -0,0 +1,13 @@
+function sub() {
+        var input = document.createElement("input");
+        var button = document.getElementById("emailsub");
+        input.setAttribute("type", "email");
+        input.setAttribute("id", "input");
+        input.setAttribute("placeholder", "Email");
+        var send = document.createElement("button");
+        send.setAttribute("id", "send");
+        send.innerHTML = "send";
+        //  document.getElementById("sub ").innerHTML = " ";
+        document.getElementById("button").replaceChild(input, button);
+        document.getElementById("button").appendChild(send);
+    }
diff --git a/Buttons/Button_to_email_field/Code/style.css b/Buttons/Button_to_email_field/Code/style.css
@@ -0,0 +1,53 @@
+.emailbutton {
+            background-color: rgb(130 231 255);
+        }
+
+        #emailsub {
+            background-color: white;
+            color: rgb(30, 196, 238);
+            padding: 15px;
+            border: none;
+            border-radius: 50px;
+            cursor: pointer;
+            width: 100%;
+            transition: 1s;
+        }
+
+        #input {
+            margin: 0px;
+            padding: 10px;
+            width: 100%;
+            outline: none;
+            height: 30px;
+            border-radius: 50px;
+            color: black;
+            border: none;
+            background-color: white;
+        }
+
+        #send {
+            position: absolute;
+            border-radius: 18px;
+            right: -15px;
+            z-index: 2;
+            top: 5px;
+            border: none;
+            width: 32%;
+            padding: 12px;
+            border: none;
+            cursor: pointer;
+            color: white;
+            background-color: skyblue;
+            box-shadow: -6px 5px 11px white inset;
+            transform: translateX(2px);
+        }
+
+        #button {
+            position: absolute;
+            top: 5px;
+            border-radius: 5px;
+            z-index: 2;
+            border: none;
+            cursor: pointer;
+            color: white;
+        }
diff --git a/Buttons/Button_to_email_field/Readme.md b/Buttons/Button_to_email_field/Readme.md
@@ -0,0 +1,12 @@
+# Button to Email field
+<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
+<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://img.icons8.com/color/48/000000/html-5--v1.png"/> <a href="https://www.w3schools.com/css/" target="_blank"><img src="https://img.icons8.com/color/48/000000/css3.png"/></a>   
+<img src="https://img.icons8.com/color/48/000000/javascript--v1.png"/></p>
+<hr>
+
+### Preview
+
+https://user-images.githubusercontent.com/89654310/150933376-f4f5fa37-654e-4a88-8e0d-0e4fb59b8eff.mp4
+
+
+
