Latest Design concept is the UI is Material Design. Most of the Mobile app design are Material. And all the Google Web and Mobile UI are now Material Design. Material Design is very Clean and Attractive for the user. Its will easily understand and easy to use by the user. Here I will give the Material Design Upload Button for you. In this Small jQuery Code used if you add this code to your web page before that you must add the jQuery library JS file into your code. Other wise upload button will not work.
CSS:
.cf-file-uploader{
width: 60%;
display:block;
margin:5% auto;
}
.cf-file-uploader .name-dis {
display: inline-block;
background-color: transparent;
color: #4b4b4b;
padding-left: 8px;
margin-right: 6px;
border-bottom: 2px solid rgba(87, 173, 104, 0.55);
width: 325px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 30px;
line-height: 36px;
font-size: 16px;
font-weight: 400;
margin: 8px;
}
.cf-file-uploader label{
display: block;
float: left;
}
.cf-file-uploader input[type=file] {
position: absolute;
left: -9999px;
}
.cf-file-uploader .select {
border-radius: 50%;
width: 50px;
height: 50px;
display: block;
padding: 5px 10px;
font-size: 30px;
box-sizing: border-box;
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
background: #57ad68;
color: rgb(255,255,255);
}
.cf-file-uploader .select i{
margin: 5px 1px 5px;
}JS:
/*--Upload File JS Start Here--*/
$(document).ready(function(){
$('.file').change(function () {
var filePath = this.value;
if (filePath) {
var m = filePath.match(/([^\/\\]+)$/);
var fileName = m[1];
$(this).parent().next().html(fileName).addClass(wel);
}
});
});HTML:<div class="cf-file-uploader"> <label> <span class="select"><i class="mdi mdi-upload"></i></span> <input type="file" class="file"> </label> <span class="filename name-dis">no file selected</span> </div>
