css hover link style : demo 95

CSS

(Fonts required: Nanum Gothic.)
                        .link{
                            color: #222;
                            font-family: 'Nanum Gothic', sans-serif;
                            font-size: 25px;
                            font-weight: 800;
                            line-height: 20px;
                            text-transform: uppercase;
                            padding: 2px 0 3px 0;
                            margin: 5px;
                            display: inline-block;
                            position: relative;
                            z-index: 1;
                            transition: all .3s ease;
                        }
                        .link:focus{ color: #222; }
                        .link:hover{ color: #fff; }
                        .link:before{
                            content: '';
                            background: linear-gradient(120deg, #FF416C 0%, #FF4B2B 100%);
                            height: 7px;
                            opacity: 0.5;
                            position: absolute;
                            bottom: 6px;
                            left: 2px;
                            right: 2px;
                            z-index: -1;
                            transition: bottom 0.4s ease 0.2s, height 0.4s ease 0s, box-shadow 0.4s ease 0.2s;
                        }
                        .link:hover:before{
                            height: calc(100% + 7px);
                            box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
                            opacity: 1;
                            bottom: -2px;
                        }
                        @media only screen and (max-width: 767px){
                            .link{ margin: 0 0 30px; }
                        }
                    
License Terms