The handbook download animation

index.html

    <div class="container">
        <div class="box box-1">
            <div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-893bc9989a52eba0.png" alt=""></div>
            <button><div></div></button>
        </div>
        <div class="box box-2">
            <div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-964edcf0f07211b0.png" alt=""></div>
            <button><div></div></button>
        </div>
        <div class="box box-3">
            <div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-2ebb2b6f93add843.png" alt=""></div>
            <button><div></div></button>
        </div>
        <div class="box box-4">
            <div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-f79c4cc8de2f84ae.png" alt=""></div>
            <button><div></div></button>
        </div>

    </div>

<a href="https://dribbble.com/YancyMin" class="dr-url" target="_blank"><img class="dr" src="https://cdn.dribbble.com/assets/logo-footer-hd-a05db77841b4b27c0bf23ec1378e97c988190dfe7d26e32e1faea7269f9e001b.png" alt=""></a>

style.css

body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
i,
select {
    margin: 0;
    padding: 0;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #2C3138;
    -webkit-perspective: 90rem;
            perspective: 90rem;
    -webkit-perspective-origin: 34% 61%;
            perspective-origin: 34% 61%;
            
}

img {
    width: 160px;
}

button {
    cursor: pointer;
    outline: 0;
    width: 180px;
    height: 48px;
    border-radius: 8px;
    background-color: #2C3138;
    margin-top: 40px;
    overflow: hidden;
    -webkit-transform: scale(.7);
            transform: scale(.7);
}

button::after {
    content: "";
    position: relative;
    top: -40px;
    display: block;
    width: 48px;
    height: 107%;
    background-color: #000;
    margin-top: -1px;
    margin-left: -7px;
    border-radius: 6px 0 0 6px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxN3B4IiB2aWV3Qm94PSIwIDAgMTQgMTciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUxLjEgKDU3NTAxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJEZXNrdG9wLUhELUNvcHktMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwOS4wMDAwMDAsIC0xMDA4LjAwMDAwMCkiIGZpbGw9IiNGOUZDRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQ3LjAwMDAwMCwgNDk5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTYtQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDYuMDAwMDAwLCA0OTUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImljX2ZpbGVfZG93bmxvYWRfYmxhY2tfMjRweC0oMSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LjAwMDAwMCwgOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LDEyIEwxMCwxMiBMMTAsNiBMNCw2IEw0LDEyIEwwLDEyIEw3LDE5IEwxNCwxMiBaIE0wLDIxIEwwLDIzIEwxNCwyMyBMMTQsMjEgTDAsMjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: center;
}

button::before {
    content: "";
    display: block;
    width: 48px;
    height: 46px;
    margin-left: -7px;
    margin-top: -1px;
    -webkit-transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
    transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
}

.box-1:hover button::before {
    width: 120%;
    opacity: .8;
    background-color: #00BF9C;
}

.box-2:hover button::before {
    width: 120%;
    opacity: .8;
    background-color: #653EE6;
}

.box-3:hover button::before {
    width: 120%;
    opacity: .8;
    background-color: #008BFF;
}

.box-4:hover button::before {
    width: 120%;
    opacity: .8;
    background-color: #FF6500;
}

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 80vw;
    height: 100vh;
    margin-left: 6vw;
    /* transform:rotateX(7deg) rotateZ(-4deg) rotateY(13deg) scale3d(1, 1, -0.9); */
    -webkit-transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9);
            transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9);
}

.box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    will-change: transform;
}

.box:hover .cover {
    -webkit-transform: translateY(-14px) scale(1.04);
            transform: translateY(-14px) scale(1.04);
}

.box-1 button {
    border: 1px solid #00BF9C;
    color: #fff;
    font-size: 22px;
    text-align: right;
    padding-right: 20px;
    line-height: 40px;
}

.box-1 button::after {
    content: "";
    background-color: #00BF9C;
    top: -85px
}

.box-2 button {
    border: 1px solid #653EE6;
    color: #fff;
    font-size: 22px;
    text-align: right;
    padding-right: 20px;
    line-height: 40px;
}

.box-2 button::after {
    content: "";
    background-color: #653EE6;
    top: -85px
}

.box-3 button {
    border: 1px solid #008BFF;
    color: #fff;
    font-size: 22px;
    text-align: right;
    padding-right: 20px;
    line-height: 40px;
}

.box-3 button::after {
    content: "";
    background-color: #008BFF;
    top: -85px
}

.box-4 button {
    border: 1px solid #FF6500;
    color: #fff;
    font-size: 22px;
    text-align: right;
    padding-right: 20px;
    line-height: 40px;
}

.box-4 button::after {
    content: "";
    background-color: #FF6500;
    top: -85px
}

.cover {
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    will-change: transform;
}

.cover img {
    -webkit-transition: all 260ms ease-in-out;
    transition: all 260ms ease-in-out;
}

.box .cover::after {
    content: "";
    z-index: -99;
    position: absolute;
    top: 20px;
    left: -20px;
    display: block;
    width: 160px;
    height: 214px;
    opacity: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 160px 214px;
    -webkit-filter: blur(24px);
            filter: blur(24px);
    -webkit-transition: all 260ms ease-in-out;
    transition: all 260ms ease-in-out;
    will-change: transform;
    -webkit-transform: scale(.6);
            transform: scale(.6);
}

.box:hover .cover::after {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}

.box-1 .cover::after {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-893bc9989a52eba0.png');
}

.box-2 .cover::after {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-964edcf0f07211b0.png');
}

.box-3 .cover::after {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-2ebb2b6f93add843.png');
}

.box-4 .cover::after {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-f79c4cc8de2f84ae.png');
}

.box-1 button div::before {
    content: 'Sensebot';
    position: relative;
    top: -44px;
    left: -4px;
    color: #00BF9C;
    font-size: 21px;
    font-weight: 300;
}

.box-1:hover button div::before {
    color: #fff;
}

.box-2 button div::before {
    content: 'OnePass';
    position: relative;
    top: -44px;
    left: -6px;
    color: rgb(154, 123, 255);
    font-size: 21px;
    font-weight: 300;
}

.box-2:hover button div::before {
    color: #fff;
}

.box-3 button div::before {
    content: 'DeepKnow';
    position: relative;
    top: -44px;
    left: 3px;
    color: #008BFF;
    font-size: 21px;
    font-weight: 300;
}

.box-3:hover button div::before {
    color: #fff;
}

.box-4 button div::before {
    content: 'Scanner';
    position: relative;
    top: -44px;
    left: -9px;
    color: #FF6500;
    font-size: 21px;
    font-weight: 300;
}

.box-4:hover button div::before {
    color: #fff;
}

.dr {
position: absolute;
  bottom: 16px; 
  right: 16px;
  width:100px;
}

the-handbook-download-animation.markdown

The handbook download animation

A Pen by Yancy Min on CodePen.

License.