css hover link style : demo 78

CSS

(Fonts required: Mali.)
                        .link{
                            color: #e74c3c;
                            font-family: 'Mali', cursive;
                            font-size: 25px;
                            font-weight: 700;
                            text-transform: uppercase;
                            padding: 0 10px;
                            display: inline-block;
                            overflow: hidden;
                            position: relative;
                            z-index: 1;
                            transition: all 0.3s;
                        }
                        .link:hover{ color: #e74c3c; }
                        .link:before,
                        .link:after{
                            content: "";
                            background-color: #555;
                            width: 100%;
                            height: 100%;
                            opacity: 0;
                            transform: rotate(-45deg);
                            transform-origin: left center;
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: -1;
                            transition: all 0.4s;
                            clip-path: polygon(5% 0, 15% 15%, 0 5%, 0 95%, 15% 85%, 5% 100%, 95% 100%, 85% 85%, 100% 95%, 100% 5%, 85% 15%, 95% 0);
                        }
                        .link:after{
                            background-color: #777;
                            transform: rotate(-45deg) scale(0.955,0.85);
                            transform-origin: right center;
                            left: -4px;
                            clip-path: none;
                        }
                        .link:hover:before{
                            opacity: 1;
                            transform: rotate(0);
                        }
                        .link:hover:after{
                            background-color: #fff;
                            opacity: 1;
                            transform: rotate(0) scale(0.955,0.85);
                        }
                        @media only screen and (max-width: 767px){
                            .link{ margin: 0 0 20px 0; }
                        }
                    
License Terms