newcat

Upload Button Styling Test

Apr 2nd, 2015
252
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.22 KB | None | 0 0
  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.             .btn {
  5.                 position: relative;
  6.                 overflow: hidden;
  7.                 margin: 10px;
  8.                 color: #ffffff;
  9.                 background-color: #f0ad4e;
  10.                 border-color: #eea236;
  11.                 display: inline-block;
  12.                 margin-bottom: 0;
  13.                 font-weight: normal;
  14.                 text-align: center;
  15.                 vertical-align: middle;
  16.                 cursor: pointer;
  17.                 background-image: none;
  18.                 border: 1px solid transparent;
  19.                 white-space: nowrap;
  20.                 padding: 6px 12px;
  21.                 font-size: 14px;
  22.                 line-height: 1.42857143;
  23.                 border-radius: 4px;
  24.             }
  25.            
  26.             .btn:hover {
  27.                 background-color: #ffc263;
  28.             }
  29.            
  30.             .btn input.upload {
  31.                 position: absolute;
  32.                 top: 0;
  33.                 right: 0;
  34.                 margin: 0;
  35.                 padding: 0;
  36.                 font-size: 20px;
  37.                 cursor: pointer;
  38.                 opacity: 0;
  39.                 filter: alpha(opacity=0);
  40.             }
  41.         </style>
  42.     </head>
  43.     <body>
  44.         <form name="uploadformular" enctype="multipart/form-data" action="tpool-upload.php" method="post">
  45.             <div class="btn">
  46.                 <span>Datei auswählen</span>
  47.                 <input type="file" class="upload" name="uploaddatei" maxlength="255" />
  48.             </div>
  49.             <div class="btn">
  50.                 <span>Hochladen</span>
  51.                 <input type="Submit" name="submit" class="upload" />
  52.             </div>
  53.         </form>
  54.     </body>
  55. </html>
Advertisement
Add Comment
Please, Sign In to add comment