I want to create a custom button for a file upload in a form using simple html and css. Here is my code.
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="upload-btn-wrapper">
<button class="btn">Upload a file<i style="font-size:18px" class="fa"></i></button>
<input type="file" name="myfile" />
</div>if it is just about to design upload button cutomly then this css code is also usefull.
Here is your css and open the snippet to check.
.upload_field input.wpcf7-file::-webkit-file-upload-button {
border: none;
color: #fff;
font-weight: 500;
background: linear-gradient(90deg, rgba(35,90,75,8) 0%, rgb(33, 169, 99) 35%, rgba(39,203,119,1) 100%);
padding: 4px 18px;
border-radius: 30px;
cursor: pointer;
box-shadow: 2px 1px 9px -3px #25c171;
}
.upload_field input.wpcf7-file::-webkit-file-upload-button:hover {
background: linear-gradient(90deg, rgba(39,203,119,1) 0%, rgba(39,203,119,1) 35%, rgba(14,90,51,1) 100%);
}
.upload_field input.wpcf7-file::-webkit-file-upload-button:focus{
outline:none;
}
.upload_field input.wpcf7-file:focus {
outline: none;
}
.upload_field {
margin-bottom: 20px;
padding-left: 5px;
border: 1px solid #e6e6e6;
padding: 15px 10px 25px;
border-radius: 20px;
}<div class="upload_field">
<label>Please Upload Your Resume(jpg,png, pdf, doc).<br>
<span class="wpcf7-form-control-wrap file-874"><input type="file" name="file-874" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.png,.pdf,.doc" aria-invalid="false"></span></label>
</div>
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.fa {
margin-left: 10px;
padding: 10px;
background: white;
color : #0e5a33;
border-radius: 50%;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn {
border: 2px solid #0e5a33;
background-color: #0e5a33;
box-shadow: 8px 8px 18px 0px rgba(84, 181, 119, 0.3) !important;
font-size: 18px;
padding: 5px 5px 5px 28px;
border-radius: 25px;
color: white;
}
.btn:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
opacity: 1;
-webkit-transform: translate(-105%, 0);
transform: translate(-105%, 0);
background-color: rgba(255, 255, 255, 0.8);
}
.btn:hover:before{
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="upload-btn-wrapper">
<button class="btn">Upload a file<i style="font-size:18px" class="fa"></i></button>
<input type="file" name="myfile" />
</div><!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>Animated Button</h2>
<button class="button" style="vertical-align:middle"><span>Upload File </span>
</button>
</body>
</html>
