<div class="download-btn">
    <div class="download-btn__icon">
        <svg id="archive-icon" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1088 832q0-26-19-45t-45-19h-256q-26 0-45 19t-19 45 19 45 45 19h256q26 0 45-19t19-45zm576-192v960q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-960q0-26 19-45t45-19h1408q26 0 45 19t19 45zm64-448v256q0 26-19 45t-45 19h-1536q-26 0-45-19t-19-45v-256q0-26 19-45t45-19h1536q26 0 45 19t19 45z"/></svg>
        <svg id="download-icon" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#000000" id="Core" transform="translate(-383.000000, -213.000000)"><g id="file-download" transform="translate(383.000000, 213.500000)"><path d="M14,6 L10,6 L10,0 L4,0 L4,6 L0,6 L7,13 L14,6 L14,6 Z M0,15 L0,17 L14,17 L14,15 L0,15 L0,15 Z" id="Shape"/></g></g></g></svg>
    </div>
    <div class="download-btn__label">
        <span>SpotifyInstaller.zip</span>
        <small>32.6 MB</small>
    </div>
</div>
body {
        font-family: 'Open Sans';
        letter-spacing: 0.3px;
        margin: 50px;
    }
    .download-btn {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .download-btn__icon {
        border-radius: 50%;
        background-color: #3baaf5;
        width: 48px;
        height: 48px;
        overflow: hidden;
        position: relative;
        margin-right: 10px;
    }
    .download-btn__icon svg {
        width: 18px;
        height: 18px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.3s;
    }
    .download-btn__icon svg#download-icon {
        top: 0%;
        opacity: 0;
    }
    .download-btn__icon svg path {
        fill: #fff;
    }
    .download-btn__label {
    }
    .download-btn__label span {
        display: block;
        margin-bottom: 3px;
    }
    .download-btn__label small {
        opacity: 0.4;
    }
    
    .download-btn__icon:hover svg#archive-icon {
        top: 100%;
        opacity: 0;
    }
    
    .download-btn__icon:hover svg#download-icon {
        top: 50%;
        opacity: 1;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.