css hover link style : demo 89

CSS

(Fonts required: Amaranth.)
                        .demo{ background-color: #EE5A24; }
                        .link{
                            color: #fff;
                            font-family: 'Amaranth', sans-serif;
                            font-size: 25px;
                            font-weight: 600;
                            letter-spacing: 2px;
                            line-height: 20px;
                            text-transform: uppercase;
                            display: inline-block;
                            transition: all .3s ease-in-out;
                        }
                        .link:hover{
                            color: #fff;
                            text-shadow: 0 0 5px #222;
                        }
                        .link span{ display: inline-block; }
                        .link:hover span:nth-child(1){ animation: animate .5s; }
                        .link:hover span:nth-child(2){ animation: animate_1 .5s; }
                        .link:hover span:nth-child(3){ animation: animate_2 .5s; }
                        .link:hover span:nth-child(4){ animation: animate_3 .5s; }
                        .link:hover span:nth-child(5){ animation: animate_4 .5s; }
                        .link:hover span:nth-child(6){ animation: animate_5 .5s; }
                        .link:hover span:nth-child(7){ animation: animate_6 .5s; }
                        @keyframes animate{
                            0%{ transform: translate(0, 0); }
                            50%{ transform: translate(50px, 5px); }
                            75%{ transform: translate(5px, 5px); }
                            100%{ transform: translate(0, 0); }
                        }
                        @keyframes animate_1{
                            0%{ transform: translate(0, 0); }
                            25%{ transform: translate(-4px, 0); }
                            50%{ transform: translate(3px, 4px); }
                            100%{ transform: translate(0, 0); }
                        }
                        @keyframes animate_2{
                            0%{ transform:translate(0, 0); }
                            20%{ transform:rotate(360deg); }
                            50%{ transform:scale(2); }
                            100%{ transform:translate(0, 0); }
                        }
                        @keyframes animate_3{
                            0%{ transform:translate(0, 0); }
                            20%{ transform:translate(-10px, -2px); }
                            100%{ transform:translate(0, 0); }
                        }
                        @keyframes animate_4{
                            0%{ transform:translate(0, 0); }
                            20%{ transform:translate(0, 10px); }
                            80%{ transform:translate(0, 15px); }
                            100%{ transform:translate(0, 0); }
                        }
                        @keyframes animate_5{
                            0%{ transform:translate(0, 0); }
                            20%{ transform:translate(0, -10px); }
                            40%{ transform:translate(0, 0); }
                            60%{ transform:translate(0, -10px); }
                            100%{ transform:translate(0, 0); }
                        }
                        @keyframes animate_6{
                            0%{ transform:translate(0, 0); }
                            50%{ transform:skewY(50deg); }
                            100%{ transform:translate(0, 0); }
                        }
                        @media only screen and (max-width: 767px){
                            .link{ margin: 0 0 30px; }
                        }
                    
License Terms