When using input type="file" for upload option in web pages we come across there is a raw Browse button with text near "No file selected".
In well designed form it look like odd one. So we can change it like a designed button with representing Icon using CSS.
Simple Upload Button:
CSS Upload Button:
Here is the example of Video Upload button with Video Icon,
<div class="upload_vid">
<div class="video_icon">
<input class="file_browse" type="file" value="">
</div>
<span>Upload Video</span>
</div>
CSS code:
.file_browse{
opacity:0.0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
width:135px !important;
cursor: pointer;
}
.upload_vid
{
background:#56B24E;
border-radius:2px;
padding:7px;
border:#eaeaea 1px solid;
display:inline-block;
cursor:pointer;
vertical-align: middle;
overflow: hidden;
}
.upload_vid > span
{
color:#eee;
padding-left:5px;
font-size:1em;
font-weight:bold;
line-height:100%;
display:inline-block;
vertical-align:middle;
}
.upload_vid:hover
{
background:#3176b1;
border:#3176b1 1px solid;
}
.upload_vid:hover > span
{
color:#fff;
}
.upload_vid .video_icon
{
background:#94a6b4;
}
.upload_vid .video_icon:before
{
border-bottom:#f6f6f6 2px dotted;
border-top:#f6f6f6 2px dotted;
}
.upload_vid .video_icon:after
{
background:#f6f6f6;
color:#94a6b4;
}
.upload_vid:hover .video_icon
{
background:#fff;
}
.upload_vid:hover .video_icon:before
{
border-bottom:#3176b1 2px dotted;
border-top:#3176b1 2px dotted;
}
.upload_vid:hover .video_icon:after
{
background:#3176b1;
color:#fff;
}
.video_icon
{
width:22px;
height:22px;
background:#000;
display:inline-block;
vertical-align:middle;
position:relative;
padding:2px;
}
.video_icon:before
{
width:18px;
height:18px;
background:transparent;
display:block;
position:absolute;
border-bottom:#FFF 2px dotted;
border-top:#FFF 2px dotted;
content:"";
}
.video_icon:after
{
width:8px;
height:8px;
background:#fff;
display:block;
position:absolute;
content:"\25BA";
left:50%;
top:50%;
margin-top:-4px;
margin-left:-4px;
color:#000;
border-radius:50%;
font-size:7px;
line-height:8px;
text-align:center;
}