HTML input type File like Button CSS with example

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>

    .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;
    }