buttons style : demo 21

CSS

                        .btn{
                            position:relative;
                            border-radius:0;
                            text-transform: uppercase;
                            z-index: 1;
                            transition: all 0.5s ease 0s;
                        }
                        .btn:after{
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: -1;
                            opacity: 0;
                            width: 100%;
                            height: 100%;
                            transform: scale(1, 0.5);
                            transition: all 0.4s ease 0s;
                        }
                        .btn:hover:after{
                            opacity: 1;
                            transform: scale(1, 1);
                        }
                        .btn.purple{
                            border: 1px solid #580141;
                            color:#580141;
                        }
                        .btn.purple:after{
                            background-color: rgba(88, 1, 65, 1);
                        }
                        .btn.green{
                            border: 1px solid #396b1c;
                            color:#396b1c;
                        }
                        .btn.green:after{
                            background-color: rgba(57, 107, 28, 1);
                        }
                        .btn.orange{
                            border: 1px solid #e67e22;
                            color:#e67e22;
                        }
                        .btn.orange:after{
                            background-color: rgba(230, 126, 34, 1);
                        }
                        .btn.blue{
                            border: 1px solid #3498db;
                            color:#3498db;
                        }
                        .btn.blue:after{
                            background-color: rgba(52, 152, 219, 1);
                        }
                        .btn.purple:hover,
                        .btn.green:hover,
                        .btn.orange:hover,
                        .btn.blue:hover{
                            color:#fff;
                        }
                        @media only screen and (max-width: 767px) {
                            .btn{
                                margin-bottom: 15px;
                            }
                        }
                    
License Terms