buttons style : demo 7

HTML

                    
                

CSS

                    .btn{
                        padding: 15px 25px;
                        text-transform: uppercase;
                        position: relative;
                        transition: all 0.6s ease 0s;
                    }
                    .btn:before{
                        content: "";
                        position: absolute;
                        top:0;
                        left:0;
                        width: 100%;
                        height:0;
                        z-index: -1;
                        transition: all 0.6s ease 0s;
                    }
                    .btn:after{
                        content: "";
                        position: absolute;
                        bottom:0;
                        right:0;
                        width: 100%;
                        height:0;
                        z-index: -1;
                        transition: all 0.6s ease 0s;
                    }
                    .btn:hover{
                        color:#fff;
                    }
                    .purple{
                        border: 1px solid #580141;
                        color: #580141;
                    }
                    .purple:hover:before,
                    .purple:hover:after{
                        background: #580141;
                        height:50%;
                    }
                    .green{
                        border: 1px solid #396b1c;
                        color: #396b1c;
                    }
                    .green:hover:before,
                    .green:hover:after{
                        background: #396b1c;
                        height:50%;
                    }
                    .blue{
                        border: 1px solid #3498db;
                        color: #3498db;
                    }
                    .blue:hover:before,
                    .blue:hover:after{
                        background: #3498db;
                        height:50%;
                    }
                    .orange{
                        border: 1px solid #e67e22;
                        color: #e67e22;
                    }
                    .orange:hover:before,
                    .orange:hover:after{
                        background: #e67e22;
                        height:50%;
                    }
                    @media only screen and (max-width: 767px) {
                        .btn{
                            margin-bottom: 15px;
                        }
                    }