HTML Custom Upload Button with hand cursor on hover - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button hover

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button hover

Description

HTML Custom Upload Button with hand cursor on hover

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#uploadMask {<!-- w w w  .j a va2s  . co m-->
   width:160px;
   display: block;
   float:left;
   overflow: hidden;
   height:32px;
   margin-right: 5px;
   position: relative;
}
#uploadMask input {
   position: absolute;
   top:0;
   bottom: 0;
   right:0;
   opacity: 0;
   z-index: 2;
   cursor: pointer;
   font-size:200px;
}
#uploadMask .button {
   background:#ccc;
   line-height:24px;
   padding:5px 15px;
   display:block;
}


      </style> 
 </head> 
 <body> 
  <span id="uploadMask"> <input type="file" multiple name="file" id="file_upload"> <span class="button">Select Documents</span> </span>  
 </body>
</html>

Related Tutorials