buttons style : demo 9

HTML

                    
                

CSS

                    .btn{
                        padding: 25px 35px;
                        text-transform: uppercase;
                        position: relative;
                        border-radius: 0;
                        overflow: hidden;
                        transition:all 0.7s ease 0s;
                    }
                    .btn:before{
                        content: "";
                        width: 0;
                        height: 0;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        border-width: 0;
                        border-style: solid;
                        z-index: -1;
                        transition:all 0.7s ease 0s;
                    }
                    .btn:after{
                        content: "";
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 0;
                        height: 0;
                        border-width: 0;
                        border-style: solid;
                        z-index: -1;
                        transition:all 0.7s ease 0s;
                    }
                    .btn:hover:before,
                    .btn:hover:after{
                        border-width: 130px 262.5px;
                    }
                    .btn:hover{
                        color:#fff;
                    }
                    .purple{
                        border: 1px solid #2e0550;
                        color:#2e0550;
                    }
                    .purple:before{
                        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2e0550;
                    }
                    .purple:after{
                        border-color: rgba(0, 0, 0, 0) #2e0550 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
                    }
                    .green{
                        border: 1px solid #396b1c;
                        color:#396b1c;
                    }
                    .green:before{
                        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #396b1c;
                    }
                    .green:after{
                        border-color: rgba(0, 0, 0, 0) #396b1c rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
                    }
                    .orange{
                        border: 1px solid #e67e22;
                        color:#e67e22;
                    }
                    .orange:before{
                        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e67e22;
                    }
                    .orange:after{
                        border-color: rgba(0, 0, 0, 0) #e67e22 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
                    }
                    .blue{
                        border: 1px solid #3498db;
                        color:#3498db;
                    }
                    .blue:before{
                        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #3498db;
                    }
                    .blue:after{
                        border-color: rgba(0, 0, 0, 0) #3498db rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
                    }
                    @media only screen and (max-width: 767px) {
                        .btn{
                            margin-bottom: 15px;
                        }
                    }