Home • Programming • HTML5 Sep 30th, 2013 at 01:02 AM

How to make fancy upload button?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Upload</title>
<style>
div.upload {
    width: 157px;
    height: 57px;
    background: url(https://lh6.googleusercontent.com/-dqTIJRTqEAQ/UJaofTQm3hI/AAAAAAAABHo/w7ruR1SOIsA/s157/upload.png);
    overflow: hidden;
}

div.upload input {
    display: block !important;
    width: 157px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}
</style>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="file" name="upload"/>
    </div>
</form>
</body>
</html>

[a href="/virtual-pc/files/users/3/demo/upload_button.htm"]Demo[/a]

/14

How to make fancy upload button?

Comments 5

Share