Responsive Upload Button With Pop Up Message Using html css javascript

How to create Responsive Upload Button With Pop Up Message Using html css javascript

Hi there😊 i hope you guys having a nice day.

Today we are going to creat something epic

We want to creat how to make upload button with pop up Message Using Only html Css, So let's feel the deference.

Preview 

Html Code

 <! DOCTYPE html/>

 <html/>

 <head)

 <title/>Video

 Upload </title >

 <link

 rel= "stylesheet"

 type=" text/css "

 href="style.css" />

 <script>

 function myFunction()

 alert("VIdeo Uploaded

 Successfully .. !! ");

 </script>

 <div class="container">

 <input type="file" class="upload"/>

 

 <button class="button"

 onclick="myFunction()"

 Submit

 </button>

 </div>

 </body>

 </html>

Css Code

body

 {

 background-color :

 cyan;

 }

 

 .container

 {

 margin-top: 20%;

 margin-left: 30%;

 

 }

 

 .container .upload

 {

 font-size:1.5rem;

 font-family: poppins ,

 border-radius: 25px;

 border: lpx solid black;

 box-shadow: 5px 5px 10px black;

 outline: none;

 }

 

 ::-webkit-file-upload-button

 {

 color: white;

 background-color: bl.ack;

 padding: 20px;

 border: none;

 border: 25px;

 box-shadow: lpx O lpx lpx 

 #ddffdd;

 transition: all 0.35 ease;

 cursor: pointer;

 }

 

 :: -webkit-file-upload-button : hover

 { background-color: #ff4c29;

 color: black:

 

 .button

 {

 background-color:#ff4b29

 border: none;

 color: white;

 width: 20%;

 padding: 15px 32px;

 text-align: center;

 

 display: inline-block;

 font-size:17px;

 margin: 4px 2px;

 margin-left: 5%;

 border-radius: 25px;

 cursor: pointer;

 transition: at1 0.35 ease;

 box-shadow: 5px 5px 10px black;

 }

Javascript Code

 <script>

 function myFunction()

 alert("VIdeo Uploaded

 Successfully .. !! ");

 </script>

/* hiisgraphics.com /*

Thank you for your reading.

Gracias