buttons style : demo 14

CSS

                        .btn{
                            border-radius: 0;
                            text-transform: uppercase;
                            color:#fff;
                            display: inline-block;
                            position: relative;
                            transform-style: preserve-3d;
                            transition: all 0.3s ease 0s;
                        }
                        .btn:after{
                            content: "";
                            position: absolute;
                            top: -40%;
                            left: -1px;
                            width: 101%;
                            height: 42%;
                            z-index: -1;
                            transform: rotateX(90deg);
                            transform-origin: 0 100% 0;
                            transition: all 0.3s ease 0s;
                        }
                        .btn:hover{
                            color:#fff;
                        }
                        .blue{
                            background: #5cbcf6;
                        }
                        .blue:after{
                            background: #49a7df;
                        }
                        .green{
                            background: #396b1c;
                        }
                        .green:after{
                            background: #385924;
                        }
                        .orange{
                            background: #e67e22;
                        }
                        .orange:after{
                            background: #cc7428;
                        }
                        .yellow{
                            background: #f29e0d;
                        }
                        .yellow:after{
                            background: #d6921f;
                        }
                        .blue:hover,
                        .green:hover,
                        .orange:hover,
                        .yellow:hover{
                            transform:rotateX(-15deg);
                        }
                        @media only screen and (max-width: 767px) {
                            .btn{
                                margin-bottom: 15px;
                            }
                        }
                    
License Terms